页面美化（二）

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

圆角边框属性

属性语法	声明
border-radius	创建四个圆角
border-top-left-radius	设置左上角
border-top-right-radius	设置右上角
border-bottom-right-radius	设置右下角
border-bottom-left-radius	设置左下角

border-radius取四个值时：左上、右上、右下、左下

border-radius取三个值时：左上，右上  左下，右下

border-radius取两个值时：左上  右下，右上  左下

border-radius取一个值时：四个角相等

边框阴影：text-shadow（给文本添加阴影）box-shadow（给元素添加周边阴影效果）

box-shadow属性的参数值

属性	说明
阴影类型	默认外阴影，insert（设置内阴影）
x-offset	阴影水平偏移量，取值可以是正、负；取正：阴影向右偏移 取负：阴影向左偏移
y-offset	阴影垂直偏移量，取值可以是正、负；取正：阴影在对象的底部 取负：阴影在对象的顶部
阴影模糊半径	值只能是正数，取0表示阴影不具有模糊效果，值越大，阴影边缘越模糊
阴影扩展半径	可取正负，如果取正整个阴影都延展扩大，反之值为负时则缩小
阴影颜色	如果没有设置颜色，浏览器会取默认色（注：各浏览器默认色不同，建议不要省略此参数）

图片边框：

     语法：border-image：border-image-source border-image-slice border-image-width border-image-repeat

border-image：图片路径  图片内偏移量  边框的宽度  排列方式

border-image 属性

属性	说明
border-image-source	通过URL（）调用背景图片，图片的路径可以是相对地址也可以是绝对地址，如果不想使用背景图片，可以把值设置为none，默认值也是none
border-image-slice	上、右、下、左的边缘的元素内偏移，其取值支持px或百分比的值，默认单位是px
border-image-width	设置边框的宽度，可以直接用border-width来代替
border-image-repeat	指定border-image的排列方式，取值有stretch、repeat、round、space

borde-image-repeat属性的参数设置

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

渐变背景：

radial-gradient（设置渐变中心，渐变形状，渐变大小，起始颜色值，中间颜色值，中间颜色位置，终点颜色）

    linear-gradient（[渐变角度|to 渐变的方向]，起始位置[,中间颜色值]+）

     线性渐变语法：linear-gradient（[<angle> | to <side-or-cornet>],<color-stop>,...,<color-stop>）

     angle：角度，0表示渐变方向从下向上，90从左向右，如果取下值角度按逆时针方向旋转

     side-or-cornet：通过关键词确定渐变方向，to top ，to right ，to bottom ， to left..

     color-stop：颜色起点

     color-stop：颜色结束点

不同浏览器的专用语法如下：

Safari4+，Chrome 2+：-webkit-gradient（linear，0，0,100%，from（起始颜色 to （结束颜色）））

Safari5+，Chrome 10+：-webkit-radial-gradient（.....）

radial-gradient属性

属性	说明
渐变中心	可选参数，eg：30px  20px  指距离左侧30px 距离上侧20px 可以是像素，百分比，也可以是默认值，默认中心位置
渐变形状	可选参数circle（圆形）或ellipse（椭圆）
渐变大小	可循环参数，可以取值 close-side：指定径向渐变半径长度为从圆心到离圆心最近的边 closet-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边 farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角 contain：包含指定径向渐变的半径长度为从圆心到离圆心最近的点，类似于closet-side cover：覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点，类似于fartheset-corner

图片背景美化：

                

背景属性

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

background-clip和background-origin属性的值

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