不常用的Css3属性

CSS3边界图片

border-image属性允许你指定一个图片作为边框！

//在div中使用图片创建边框
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and other */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3的background-Origin属性

background-Origin属性指定了背景图像的位置区域。

//在 content-box 中定位背景图片：
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}

CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

#example1 {
    background-image: url(/statics/img_flwr.gif), url(/statics//paper.gif);
    background-position: right bottom, left top;  //背景图显示的位置，右边底部 左边顶部  没有指定background-Origin默认显示在content-box区域
    background-repeat: no-repeat, repeat;  //背景图是否平铺
    background-size:100% 100%; //规定背景图片的尺寸
    padding: 15px;  
}

box-shadow可以在 ::before 和 ::after 两个伪元素中添加阴影效果

#boxshadow::after { 
    content: '' ; 
    position: absolute ; 
    z-index: -1 ; /* hide shadow behind image */  
    box-shadow: 0 15px 20px rgba(0 ,0, 0, 0.3); 
    width: 70 %; 
    left: 15 %; /* one half of the remaining 30% */ 
    height: 100 px; 
    bottom: 0 ;
}

CSS3创建多列

column-count属性指定元素的列数应分为：

//划分成三列的div元素的文本：
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3; //将文本划分为3列
column-gap:5px; //指定列之间的距离
column-rule:3px outset #ff00ff;  //column-rule属性设置列之间的宽度，样式和颜色。
}

CSS3 外形修饰（outline-offset ）

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：

轮廓不占用空间

轮廓可能是非矩形

div
{
	margin:20px;
	width:150px; 
	padding:10px;
	height:70px;
	border:2px solid black;
	outline:2px solid red;
	outline-offset:15px;
} 

图片滤镜

CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。
注意: Internet Explorer或 Safari 5.1 (及更早版本) 不支持该属性。

//修改所有图片的颜色为黑白 (100% 灰度):
img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

使用 CSS3 box-sizing 属性

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中,两个 div 现在是一样大小的!

.div1 {
    width: 300px;
    height:100px;
    border: 1px solid blue;
   box-sizing: border-box;
}

.div2 {
    width: 300px;
   height: 100px;
    padding: 50px;
   border: 1px solid red;
    box-sizing: border-box;
}