标签：垂直 ice png ado webkit -- html 阴影 图像
现今，界面极大的丰富，传统的 HTML+CSS 已经跟不上时代的步伐，在 CSS3 中，有太多非常好用的属性，可以很方便的做出种种炫酷的效果，接下来，我将例举一些常用的 CSS3 的属性。
border-radius：圆角。
border-radius : 50px ; /*四个角的圆角均为50px*/ border-radius : 50px 100px; /*左上右下的圆角是50px，左下右上的圆角是100px*/ border-radius : 10px 20px 30px 40px; /*第一个值是左上，第二个值是右上，第三个值是右下，第四个值是左下*/ -webkit-border-radius : 50px 100px; /*四个角水平是50px，垂直是100px*/
box-shadow：元素阴影。
box-shadow : 10px 20px 5px 10px red inset; /*第一个值表示阴影水平偏移（必填），第二个值表示阴影垂直偏移（必填），第三个值表示阴影羽化值（必填），第四个值表示阴影大小，第五个值表示阴影颜色（必填），第六个值表示内阴影*/
border-image：边框图片。border-image属性可以能给元素的边框添加背景图片。`border-image`属性是复合属性用于设置`border-image-source`，`border-image-slice`，`border-image-width`，` border-image-outset` 和`border-image-repeat` 的值。
border-image-source:url(1.png); /*用于指定要用于绘制边框的图像的位置*/ border-image-slice:33; /*图像边界向内偏移33%*/ border-image-width:20px; /*图像边界的宽度为20px*/ border-image-outset:20px; /*用于指定在边框外部绘制的量，此处是外偏20px*/ border-image-repeat:stretch; /*图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch 默认)*/
在 CSS3 中，background 又有了一些增加，现例举三个常用的新增背景属性。
background-size，控制背景图片的大小。
background-size:100%; /*背景图片宽度和元素宽度相同，高度为auto*/ background-size:100% 100%; /*背景图片宽高和元素宽高相同，图片有可能被拉伸*/ background-size:100px; /*背景图片宽度为100px，高度为auto*/ background-size:100px 100px; /*背景图片宽高均为100px，图片有可能被拉伸*/ background-size:cover; /*背景图片较小边铺满整个元素，另一边auto*/ background-size:contain; /*背景图片较大边铺满整个元素，另一边auto*/
background-clip，后面可以赋值三种，分别是：border-box（边框域）、padding-box（内间距域）、content-box（内容域），该属性的意思是背景在哪个区域以内显示。
background-origin，同样可以赋值三种，分别是：border-box（边框域）、padding-box（内间距域）、content-box（内容域），该属性的意思是背景图片铺在哪个区域以内，即若没有设置背景定位的属性，背景图片原点落在哪个区域内。
标签：垂直 ice png ado webkit -- html 阴影 图像
原文地址：http://www.cnblogs.com/nation-blue/p/6682362.html
