• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3常规使用(4):CSS 圆角边框与背景

    CSS3常规使用(4):CSS 圆角边框与背景

    作者: 分类:HTML5与CSS3.0 点击: 423 次
    wordpress CMS主题:ssmay主题

      前面我给大家介绍了CSS3的“选择器、文本样式和盒模型”,今天,我接着为大家介绍一下“CSS 圆角边框与背景”。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;

       



      QQ二维码

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201807266200.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.