CSS3新属性简单总结（1）
浏览数：44 /
时间：2015年06月09日
一、边框
1.border-radius
简略写法：
div { border:2px solid #a1a1a1; border-radius:25px;/*IE9+、Firefox4+、Chrome、Safari5+、Opera*/ -moz-border-radius:25px; /* 老的 Firefox */ }
值：px、em、%
多种写法：
/*border-radius:25px等价于*/ border-top-left-radius:25px; border-top-right-radius:25px; border-bottom-right-radius:25px; border-bottom-left-radius:25px; /*从top-left开始顺时针*/ border-radius:25px 0px 25px 0px /*等价于*/ border-radius:25px 0px /*不规则圆角*/ border-radius: 2em 1em 4em / 0.5em 3em; /*等价于*/ border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
2.box-shadow
简略写法：
/*IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。*/
div { box-shadow: 10px 10px 5px #888888; }
语法：
box-shadow: h-shadow v-shadow blur spread color inset; /* h-shadow 必需。水平阴影的位置，允许负值。 v-shadow 必需。垂直阴影的位置，允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。 inset 可选。将外部阴影 (outset) 改为内部阴影。 */
3.box-image
简略写法：
div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round;/*Internet Explorer 11, Firefox, Opera 15, Chrome , Safari 6*/ }
完整属性：
- border-image-source 图片路径
- border-image-slice 图片边框向内偏移
- border-image-width 图片边框宽度
- border-image-outset 边框图片区域超出边框的量
- border-image-repeat repeated平铺、stretched拉伸、rounded铺满
二、背景
1.background-size
简略写法：
/*IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+*/ div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; }
值：px、em、%、cover、contain
2.background-origin
简略写法：
/*IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 。*/ div { background-image:url(‘smiley.gif‘); background-repeat:no-repeat; background-position:left; background-origin:content-box; }
值：content-box、padding-box、border-box；
background-origin 属性规定 background-position 属性相对于什么位置来定位。
如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果
3.background-clip
简略写法：
/*IE9+、Firefox、Opera、Chrome 以及 Safari */ div { background-color:yellow; background-clip:content-box; }
值：content-box、padding-box、border-box；
三、文本效果
1.text-shadow
/*Internet Explorer 9+及其他*/ /*text-shadow: h-shadow v-shadow blur color;*/ h1 { text-shadow: 5px 5px 5px #FF0000; }
2.text-overflow
div.test { text-overflow:ellipsis; }
值：clip、ellipsis、string
3.word-break
/*Opera不支持*/ p.test { word-break:hyphenate; }
值：normal、break-all、keep-all
4.word-wrap
p.test { word-wrap:break-word; }
值：normal、break-word（在长单词或 URL 地址内部进行换行）
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
