首页 > 代码库 > CSS3新属性简单总结（1）
CSS3新属性简单总结（1）
一、边框
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 地址内部进行换行）
CSS3新属性简单总结（1）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。