CSS3新增属性

• 浏览器前缀
• 圆角边框border-radius
• 图片边框border-image
• 边框阴影box-shadow
• 多重背景图片background-image: url, url, url, url;
• 背景图片尺寸background-size
• 背景裁剪background-clip
• 多栏文本columns
• 文本裁剪text-overflow

浏览器前缀

---

前缀种类

1. -webkit /*for Chrome and Safari*/
2. -moz /*for Firefox*/
3. -ms /*for IE*/
4. -o /*for Opera*/

先写私有前缀的CSS3属性，再写W3C标准的CSS3属性。 当一个属性成为W3C标准，并且被Firefox、Chrome等主流浏览器的最新版普遍兼容时，可以去掉该浏览器的私有前缀。

圆角边框border-radius

---

IE9以下的浏览器仍显示直角框

div {
      border-radius:  1-4 length|%;
}

图片边框border-image

---

1. 默认值stretch拉伸边框背景图片
2. repeat重复边框背景图片
3. round平铺边框背景图片

div {
      border-image: url(image) 1-4 length|% /broder-width(1-4 length|%) stretch | repeat | round
}

例如：

border-image: url(/border.png) 25% 25% 25% 25% / 25px round;
/*在上下右左各25%的地方将图片截取为9个部分，并自动把每个部分用于对应位置的边框，且边框宽度为25像素，round表示平铺*/

边框阴影box-shadow

---

简写：X轴偏移量、Y轴偏移量、阴影模糊半径、阴影颜色

div {
      box-shadow: x-offset y-offset blur-radius color;
}

多重背景图片background-image: url, url, url, url;

---

以此方式制作边框，IE9以下的浏览器仍显示直角框

div {
      background-image: url(/img/top-left.gif),
      url(/img/top-right.gif),
      url(/img/bottom-right.gif),
      url(/img/bottom-left.gif);
      /*再分别依次设置background-position、background-repeat*/
}

背景图片尺寸background-size

---

在不同的环境中调整大小后可以重复使用背景图片

1. contain缩小图片来适应元素的尺寸(保持像素的长宽比)
2. cover扩展图片来填满元素(保持像素的长宽比)

div {
      background: url(/img/bgimg.gif);
      background-size: width(length|%) height(length|%)|contain|cover;
      background-repeat: no-repeat;
}

背景裁剪background-clip

---

1. border-box背景被裁剪到边框
2. padding-box背景被裁剪到内边距
3. content-box背景被裁剪到内容框

div {
    background-clip: border-box|padding-box|content-box;
}

多栏文本columns

---

1. column-width列的宽度
2. column-count列数
   • IE9以下的浏览器不支持column-count属性
3. column-gap列的间隔
4. column-rule间隔线的宽度、样式和颜色

div {
      column-rule: 1px solid #ccc;
}

简写：列的宽度、列数

div {
      columns: column-width(length|%) | column-count(number);
}

文本裁剪text-overflow

---

1. clip裁剪文本
2. ellipsis显示省略符号来代替被裁剪的文本
3. string使用给定的字符串来代替被裁剪的文本

div {
    text-overflow: clip|ellipsis|string;
}