HTML响应式 第三章 页面美化（2）

圆角边框的属性

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

border-radius：四个角半径（一个值）

border-radius：左上和右下 右上和左下（2个值 ×）

border-radius：左上 右上和左下 右下（3个值 %）

border-radius：左上 右上 右下 左下（4个值）

test-shadow是给文本添加阴影效果，box-shadow是给元素块添加阴影效果

语法：box-shadow：[阴影类型] x-offset y-offset 阴影模糊半径 阴影扩展半径 阴影颜色

阴影类型：inset内阴影，默认不取任何值为外阴影

x-offset ：阴影水平偏移量，为正，在x轴的右边，为负，在x轴左边

y-offset：阴影垂直偏移量，为正，在y轴下边，为负，在y轴的上边

阴影模糊半径：只能为正值，值为0，不具有模糊效果，值越大就越模糊

阴影扩展半径：可以为正负值，为正值时，阴影扩展就越大 ，反之。

图片边框语法：（可单独设置也可以使用复合属性）

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

border-image-source：相当于图片边框的url

border-image-slice：上 右 下 左边缘的元素内偏移

border-image-width：设置边框宽度

border-image-repeat：排列方式

border-image-repeat属性的参设设置

属性	说明
stretch	拉伸填满整个空间
repeat	水平重复
round	水平平铺
space	在不截断切分图的情况下，平铺切分图并在图片之间保留一定的间距 以填满整个空间

线性渐变：linear-gradient（角度|方向，起始颜色，结束颜色）

径向渐变：radial-gradient（渐变中心，渐变形状，渐变大小，起始颜色 ，结束颜色 ）

渐变中心：如“30px 30px”指距左侧30px，距离上侧30px

渐变形状：circle或ellipse（默认）

渐变大小：closest-side 指半径长度为从圆心到离圆心最近的边

                farthest-side 指半径长度为从圆心到离圆心最远的边

图片背景美化

背景属性

属性	说明
background-color	背景颜色
background-image	背景图像
background-repeat	图片重复样式
background-size	图像尺寸大小
background-position	图像位置
background-attachment	设置元素中的图像是否固定或随页面一起滚动
background-clip	设置背景图像的裁剪方式
background-origin	设置背景图像绘制的起始位置
background-	简写属性

背景的起始点（origin）指定背景颜色和背景图像应用的位置

裁剪样式决定了背景颜色和图像在元素盒子中绘制的区域

background-clip和background-origin属性的值

属性值	说明
border-box	边框
padding-box	填充
content-box	内容