边框圆角和阴影：
注意：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 | 在内容盒子内部绘制背景颜色和背景图像 |
