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>
淘宝店
