您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

CSS知识:圆角边框与背景
发表:紫石头原创模板堂    发表时间:2019-09-12 10:31:00    阅读:73
    CSS的圆角边框可以美化页面的元素模块,让用户看着更加舒服。CSS的背景样式可以让页面元素模块更加的丰富多彩。一起随郑州紫石头模板建站公司了解一下关于它们的知识吧!
    1、圆角边框 css3
    border-radius 长度值或百分数 四条边角 CSS3
    border-top-left-radius 长度值或百分数 左上边角 CSS3
    border-top-right-radius 长度值或百分数 右上边角 CSS3
    border-bottom-left-radius 长度值或百分数 左下边角 CSS3
    border-bottom-right-radius 长度值或百分数 右下边角 CSS3
    例:
    p{ border-radius:5px; } 圆角弧度只有5px
    p{ border-radius:50%; } 这个可以让元素模块变成一个圆。
    2、设置背景
    background-color 颜色 背景的颜色 CSS1
    background-image none 或 url 背景的图片 CSS1/CSS3
    background-repeat 平铺与否 背景图片的样式 CSS1/CSS3
    background-size 长度值或其他 背景图像的尺寸 CSS3
    background-position 位置坐标 背景图像的位置 CSS1
    background-attachment 滚动方式 背景图片的滚动 CSS1/CSS3
    background-clip 裁剪方式 背景图片的裁剪 CSS3
    background-origin 位置坐标 背景图片起始点 CSS3
    background 复合值 背景图片简写方式 CSS1
    4、background-repeat:背景是否平铺
    repeat-x 水平方向平铺图像 CSS1
    repeat-y 垂直方向平铺图像 CSS1
    repeat 水平和垂直方向同时平铺图像 CSS1
    no-repeat 禁止平铺图像 CSS1
    5、background-position:背景的位置坐标
    top 将背景图片定位到元素顶部 CSS1
    left 将背景图片定位到元素左部 CSS1
    right 将背景图片定位到元素右部 CSS1
    bottom 将背景图片定位到元素底部 CSS1
    center 将背景图片定位到元素中部 CSS1
    长度值 使用长度值偏移图片的位置 CSS1
    百分数 使用百分数偏移图片的位置 CSS1
    如:background-position: 20px 20px; 第一值表示左边,第二个值表示上边。
    6、background-size:背景图片的大小
    auto 默认值,图像以本尺寸显示 CSS3
    cover 等比例缩放图像,使图像至少覆盖容器,但有可能超出容器 CSS3
    contain 等比例缩放图像,使其宽度、高度中较大者与容器横向或纵向重合 CSS3
    长度值 CSS 长度值,比如 px、em CSS3
    百分数 比如:100% CSS3
    如:
    background-size: cover; 使用 cover 相当于 100%,全屏铺面一张大图,这个值非常实用
    background-size: 240px 240px; 解释:长度值的用法,分别表示长和高。
    7、background-attachment :背景图片的滚动方式
    scroll 默认值,背景固定在元素上,不会随着内容一起滚动
    fixed 背景固定在视窗上,内容滚动时背景不动
    8、background-origin :位置坐标 css3
    border-box 在元素盒子内部绘制背景 CSS3
    padding-box 在内边距盒子内部绘制背景 CSS3
    content-box 在内容盒子内部绘制背景 CSS3
    9、.background-clip:背景图片的裁剪方式 css3
    border-box 在元素盒子内部裁剪背景 CSS3
    padding-box 在内边距盒子内部裁剪背景 CSS3
    content-box 在内容盒子内部裁剪背景 CSS3
    背景样式简写:
    background:#fff url(aa.jpg) no-repeat fixed 0 0/100% 100% content-box ;
    顺序:背景色、图片、不重复、滚动条、起点X与Y坐标 / 图片宽与高、显示位置范围
    多个背景图片:
    background: url(aa.jpg) no-repeat left top,
    url(aa.jpg) no-repeat right top,
    url(border.png) no-repeat right bottom,
    url(border.png) no-repeat left bottom;
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照