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;
}