HTML5响应式网页设计——页面美化（二）、边框、阴影、渐变

边框圆角和阴影：
注意：border-radius属性可以在IE9+、Chrome、Firefox和Safari中正确显示。
圆角边框的属性：

属性语法	说明
border-radius	创建4个圆角
border-top-left-radius	设置左上角
borde-top-rightr-radius	设置右上角
border-bottom-left-radius	设置左下角
border-bottom-right-radius	设置右下角

border-radius：4个圆角半径
border-radius：左上角和右下角半径 ， 右上角和左下角半径
border-radius：左上角半径 ，右上角左下角半径，右下角半径
border-radius：左上角半径，右上角半径，右下角半径 ，左下角半径
边框阴影：
语法：box-shadow:[投影方式] x-offset y-offset 阴影模糊半径 阴影扩展半径 阴影颜色
box-shadow属性的参数设置：

属性	说明
阴影类型	此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”其投影为内阴影
x-offset	阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边； 如果值为负值，则阴影在对象的左边；
y-offset	阴影垂直偏移量，其值可以是正负值。如果值为正值，则阴影在对象底部； 如果值为负值，则阴影在对象的底部；
阴影模糊半径	此参数可选，但其值只能是正值。如果其值为0时，表示阴影不具有模糊效果，其值越大，阴影的边缘就越模糊
阴影扩展半径	此参数可选，其值可以是正负值。如果值为正值，则整个阴影都延展扩大，反之值为负值时，则缩小
阴影颜色	此参数可选，如果不设定颜色，浏览器会取默认色

说明：
阴影的颜色默认为浏览器的默认色，但各浏览器默认取色不一致，特别是在wekbit内核下的Safari和Chrome浏览器表现为透明色，在Firefox和Opera浏览器下表现为黑色，建议不要省略此参数。
图片边框：
注意：Chrome浏览器和Firefox浏览器很早就支持border-image属性了，而IE浏览器直到IE11版本才支持。
语法：
border-image=border-image-source border-image-slice border-image-width border-image-repeat
border-image属性：

属性	说明
border-image-source	和css中的background-image属性相似，也是通过url（）调背景图片，图片的路径可以是相对地址也可以是绝对地址。如果不想使用背景图片，可以将值设为none
border-image-slice	规定了上、右、下、左边缘的元素偏移，其取值支持px或者百分比的值，默认使用px
border-image-width	用来设置边框的宽度，可以直接用border-width来代替border-image-width
border-image-repeat	用来指定border-image的排列方，取值见下表

border-image-repeat属性的参数：

属性	说明
stretch	拉伸切分图填满整个空间，默认值
repeat	平铺切分图填满整个空间 （可能导致图片被截断）
round	在不截断切分图片的情况下，平铺切分图并拉伸以填满整个空间
space	在不截断切分图片的情况下，平铺切分图并在图片之间保留一定的间距以填满整个空间

渐变背景：
线性语法：linear-gradient([[<angle>|to <side-or-corner>],]?<color-stop>[,<color-stop>]+)，linear-gradient（[[渐变角度|to 渐变的方向],]?起始颜色值[,中间颜色值]+）
不同浏览器的专门语法：
webkit-gradient(linear,0 0,0 100%,from(起始颜色，to(结束颜色)))；/适合Safari4+,Chrome2+的语法/
webkit-linear-gradient(起始颜色，结束颜色)；/适合Safari5.1+,Chrome10+的语法/
moz-linear-gradient(起始颜色，结束颜色)；/适合Firefox的语法/
o-linear-gradient(起始颜色，结束颜色)；/适合Opera的语法/
linear-gradient(起始颜色，结束颜色)；/老W3C标准属性/
Filter:progid:DXImageTransform.Microsoft.grafient(startColorstr=‘起始颜色’，endColorstr=‘结束色’)/适合IE6和IE7的语法/
径向渐变：
语法：radial-gradient（设置渐变的中心，渐变形状 渐变大小 ，起始颜色值，中间颜色值 中心颜色值得位置，终点颜色）
radial-gradient属性的参数：

属性	说明
渐变的中心	可选参数，如“30px 20px”指距离左侧30px，距离上侧20px，可以是像素，可以是百分比，也可以是关键字，默认中心
渐变形状	可选参数，可取circle(圆)或eclipse(默认值，椭圆)
渐变大小	可循环参数，可取值closeat-side：指定径向渐变的半径长度为从圆心到离圆心最近的边。closeat-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角。farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边。fatthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角。contain：包含，指定径向渐变的半径长度为从圆心到离圆心最近的点，类似closeat-side。cover：覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点，类似fatthest-corner

背景属性：

属性	说明
background-color	设置元素的背景颜色，总是显示在背景图片的下面
background-image	设置元素的背景图像，如果指定一个以上的图像，则后面的图像绘制在前面的图像下面
background-repeat	设置图像的重复样式
background-size	设置背景图像的尺寸
background-position	设置背景图像的位置
background-attachment	设置元素中的图像是否固定或随页面一起滚动
background-clip	设置背景图像的裁剪方式
background-origin	设置背景图像绘制的起始位置
background	简写属性

background-clip和 background-origin属性的值：

属性	说明
border-box	在边框盒子内部绘制背景颜色和背景图像
padding-box	在内边距盒子内部绘制背景颜色和背景图像
content-box	在内容盒子内部绘制背景颜色和背景图像