CSS3新增属性

CSS3新增属性

border-radius边框圆角属性

• 作用：设置边框的圆角
• 属性值：可以是像素值，或者是百分比，百分比参考的是盒子的整体宽度、高度的百分比。
  • x-radius/y-radius：前面是水平半径，后面为垂直半径。得到的是椭圆角。
  • radius：水平和垂直都设置为同一个值，得到的是圆角。
• 单一属性：
  • border-top-left-radius:半径; 左上角
  • border-top-right-radius:半径; 右上角
  • border-bottom-left-radius:半径; 左下角
  • border-bottom-right-radius:半径; 右下角
• border-radius相当于单一属性的简写方法，类似padding四种值写法。
  • border-radius:左上角 右上角 右下角 左下角;
  • border-radius:左上角 右上角和左下角 右下角;
  • border-radius:左上角和右下角 右上角和左下角;
  • border-radius:四角相同;
• border-radius属性中有/斜线写法，/前面可以设置水平方向的四种值写法，/后面可以设置垂直方向四种值的写法。

注：Internet Explorer 8及一下版本浏览器不支持border-radius属性，其他浏览器都支持。

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* border-radius: 5%; */
      border-radius: 200px/50px;
    }

text-shadow文字阴影

• 作用：向文本应用阴影。
• 属性值：
  • h-shadow：必需，水平阴影，允许负值。
  • v-shadow：必需，垂直阴影，允许负值。
  • blur：可选，模糊距离。
  • color：可选，阴影的颜色。

    .box1 {
      margin: 50px;
      font: bold 30px/60px "微软雅黑";
      text-shadow: 3px 3px 5px red;
    }

• 多层阴影
  • text-shadow属性可以向文本添加多个阴影，逗号分隔多个阴影的属性值。多阴影中，先写的阴影压盖在后写的阴影上。

    .box1 {
      margin: 50px;
      font: bold 30px/60px "微软雅黑";
      text-shadow: 3px 3px 3px #FF0000,
        6px 6px 3px #00ff00,
        9px 9px 3px #0000ff;
    }

box-shadow盒子阴影

• 作用：对盒子边框添加阴影。
• 属性值：
  • h-shadow：必需，水平阴影，允许负值。
  • v-shadow：必需，垂直阴影，允许负值。
  • blur：可选，模糊距离。
  • spread：可选，阴影的尺寸。
  • color：可选，阴影的颜色。
  • inset：可选，将外部阴影改为内部阴影，不选时默认外部阴影。

    .box2 {
      width: 200px;
      height: 200px;
      padding: 20px;
      border: 10px solid #0ff;
      margin: 50px;
      background-color: pink;
      box-shadow: 3px 3px 3px 3px red inset;
    }

• 多层阴影
  • box-shadow属性可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。多阴影中，先写的阴影压盖在后写的阴影上。

    .box2 {
      width: 200px;
      height: 200px;
      padding: 20px;
      border: 10px solid #0ff;
      margin: 50px;
      background-color: pink;
      box-shadow: 3px 3px 3px 3px red,
      5px 5px 5px 5px black,
      13px 13px 13px 13px yellow;
    }