CSS3边框和圆角 -- 课件

课程内容：
1、css3的圆角
2、Css3盒阴影
3、Css3边界图片


Css3圆角：
Border-radius属性：
1、复合属性，这个属性允许为元素添加圆角边框
2、语法：border-radius：1-4个值
3、兼容性：ie9+

多个值： 4个值：按照顺时针
四个值：第一个：左上角 第二个：右上角 第三个：右下角 第四个：左下角



三个值:第一个：左上角 第二个：右上角和左下角 第三个：右下角



2个值：第一个：左上角和右下角 第二个：右上角和左下角


1个值：四个圆角值相同；

属性：
Border-top-left-radius 左上角
Border-top-right-radius 右上角
Border-bottom-right-radius 右下角
Border-bottm-left-radius 左下角

记得上次写的购物车项目：
Border-radius:20px/30px; 水平半径/垂直半径


圆角案例：


技术须知：
谷歌：-webkit-
火狐：-moz-
Ie：-ms-
Opera:-o-
为了满足各种浏览器的兼容性，都会加上以上的前缀效果；

小案例总结：
1、一个项目的实现可以有多种方式；
2、对于圆角到底是圆形还是椭圆形的情况，根据你设置的宽和高决定
3、Border-radius:20px/30px; 水平半径/垂直半径
4、对于新增的属性：会加上
谷歌：-webkit-
火狐：-moz-
Ie：-ms-
Opera:-o-


盒阴影 — box-shado属性
1、可以设置一个或者多个下拉阴影的框
2、语法：h-shadow v-shadow blur spread color insert(内部阴影)
3、兼容性：IE9+

边界图片 — border-image属性
1、使用border-image- 复合属性来构建美丽的可扩展的按钮；
2、语法：border-image:source slice width outset repeat
3、兼容性：ie不兼容 opera 也不兼容 chrome firefox

边框图片的详解：
Border-image-source属性
1、指定要使用的图像 而不是border-style设置的边框样式；
2、语法：none/image

Border-image-slice属性
1、指定图像的边界向内偏移
2、Number/%/fill



Border-image-width属性
1、图片边界的宽度
2、语法：number/%/auto

Border-image-outset属性
1、在外框外部绘制区域 border-image-area的量
2、语法：length/number 没有负值

Border-image-repeat属性
1、图片是否重复、拉伸、铺满效果
2、语法：stretch repeat round initial inherit
*3、