Html5第九课新增的CSS3的边框属性

CSS3 新增的边框属性

属性 版本 简介
1、border-image CSS3 设置或检索对象的边框使用图像来填充
border-image-source CSS3 设置或检索对象的边框是否用图像定义样式或图像来源路径，值有none和<url>
border-image-width     CSS3 设置或检索对象的边框厚度
border-image-slice     CSS3 设置或检索对象的边框背景图的分割方式
border-image-outset CSS3 设置或检索对象的边框背景图的扩展
border-image-repeat CSS3 设置或检索对象的边框图像的平铺方式
 
实例：
<style>
.img{
width:300px;
height:300px;
border-image-source:url(images/border1.jpg);  /*作为背景的图片，最好做成九宫图的样式，每个部分做成相同的*/
border-image-width:19px;          /*边框宽度，就是九宫图的九分之一的宽度*/                
border-image-slice: 19;            /*切割时，按照多少的像素切割，注意这里面还有个fill的值，用九宫图中心图像填充div的中间背景*/
border-image-outset:0px;         /*背景向div的外部扩展多少像素*/
border-image-repeat:repeat;       /*背景是否重复，这里有默认拉伸stretch，重复repeat，平铺铺满round不过这种方法暂时只在火狐中显示，平铺铺满space不过这种方式暂时没有浏览器支持*/
}
 
</style>
<div class="img">
    这里是边框测试
</div>
 
 
2、border-radius         CSS3 设置或检索对象使用圆角边框
border-top-left-radius CSS3 设置或检索对象左上角圆角边框
border-top-right-radius CSS3 设置或检索对象右上角圆角边框
border-bottom-right-radius CSS3 设置或检索对象右下角圆角边框
border-bottom-left-radius CSS3 设置或检索对象左下角圆角边框
实例：
<style>
.img{
width:300px;
height:300px;
border:1px solid #F00;
/*border-radius:10px;     div的四个角的圆角半径都是10px*/
/*border-radius:10px/20px;  设置四个角半径的方法之一*/
/*border-top-left-radius:10px 20px;   div的左上角的圆角半径是10px和20px，其他角也可以这样设置*/
/*border-radius:10px 20px 30px 40px/10px 20px 30px 40px;  设置四个圆角半径也可以简写成这样*/
}
</style>
<div class="img">
    这里是边框测试
</div>
 
 
3、box-shadow CSS3 设置或检索对象阴影
取值：
none： 无阴影 
<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。 
<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。
<color>： 设置对象的阴影的颜色。
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影 

实例：
<style>
.img{
width:300px;
height:300px;
border:1px solid #F00;
box-shadow:10px 10px 10px 10px  #F00;
}
 
</style>
<div class="img">
    这里是盒子阴影测试
</div>
 
4、box-reflect   CSS3 设置或检索对象的倒影
格式:
1.none 
2.位置 偏移? 渐变图片?
 
 
取值：
位置： above(上)、below(下)、left(左)、right(右)
偏移： 用长度值来定义倒影与对象之间的间隔。可以为负值
渐变图片: 设置倒影使用的图片或者渐变，遮罩效果，默认为原内容，
渐变:linear-gradient(top,transparent,#FFF)
 
注意:该属性目前仅webkit内核浏览器(chrome/safari/猎豹等)支持，所以要加-webkit-前缀 。
 
实例：
<style>
img{
width:150px;
/*-webkit-box-reflect:right;   box-reflect倒影效果，的取值above,below,left,right*/
/*-webkit-box-reflect:below 10px;  10px是图片和倒影直接的距离*/
/*-webkit-box-reflect:below 2px  -webkit-linear-gradient(top,transparent,#FFF);   倒影渐变效果*/
-webkit-box-reflect:below 2px  -webkit-linear-gradient(top,transparent 50%,#FFF); /*倒影只显示50%的渐变效果*/
margin:100px 0px 0px 200px;
}
</style>
<div>
   <img src="images/1.jpg" />
</div>