前端零基础入门 -- CSS3边框和圆角

CSS3圆角

1. border-radius:一个可以指定四个border-……-radius属性的复合属性，为元素添加圆角边框
2. 语法：

   border-radius: a b c d

3. a,b,c,d的单位可以是px,em,%
4. 兼容性：IE9+ firefox4+ chrome safari5+ opera
   
   border-radius是复合属性：
   border-top-left-radius 左上角
   border-top-right-radius 右上角
   border-bottom-right-radius 右下角
   border-bottom-left-radius 左下角
   border-radius: 水平半径/垂直半径
   圆角案例
   
   注意：为满足各个浏览器的兼容性，加上技术前缀
   -webkit- chrome，safari
   -moz- firefox
   -ms- IE
   -o- opera

CSS3盒阴影

1. box-shadow属性：附加一个或多个下拉框的阴影
2. 语法：

   box-shadow: h-shadow v-shadow blur spread color inset

3. 兼容性：IE9+ firefox4+ chrome safari5+ opera
4. 

CSS3边界图片

1. border-image属性：构建美丽的可扩展按钮
2. 语法：

   border-image:source slice width outset repeat

3. 兼容性：IE不兼容 firefox chrome safari6+ opera不兼容

border-image-source属性

a. 指定要用的图像，而不是border-style属性设置边框样式
b. 语法：

border-image-source:url("")/none

border-image-slice属性

a. 指定图像的边界向内偏移
b. 语法：

border-image-slice:number | % |fill

border-image-width属性

a. 指定图像边界的宽度
b. 语法：

border-iamge-width:number | % |auto;

border-image-outset属性

a. 指定在边框的外部绘制border-image-area的量 – 边框区域
b. 语法：

border-iamge-outset:number|length;

border-image-repeat属性

a. 图像边界是否会重复
b. 语法：

border-iamge-repeat: stretch | repeat | round | initial | inherit;