day-4 CSS背景与边框

背景包含哪些部分

规定：一个元素的背景=元素的内容+内边距+边界（边框）下层的区域

 背景属性与属性值：

属性值	描述	用法注意
background-color	为元素设置背景（默认为transparent）	默认值是transparent
background-image	把图片放入背景（可以是静态文件，也可以是生成的渐变）	注意此处与内容<img>最好不能替换 如果同时设置了background-color和-image的后者会覆盖掉前者
background-repeat	对页面上的背景图像进行平铺设置（默认水平垂直都平铺）	值：no-repeat、repeat-x、repeat-y
background-position	设置图像在背景中的位置（如果只设置一个值，则为水平值，而垂直自动为center）
background-attachment	设置背景图像是否固定或者或者页面的其余部分滚动（默认为滚动）	值：fixed、scroll、local（兼容性不好）
background-origin	规定背景图像的定位区域（默认是padding-box）	如果background-attachment设置为fixed,该属性自动失效 值：padding-box、content-box、border-box
background-clip	规定背景的绘制区域（默认为border-box）	值：padding-box、content-box、border-box
background-size	允许动态调整背景图像的大小（ie9一下不支持）	1）两条边的值设置 用px或者%都可以 2）cover图扩到足够大以至于覆盖整个背景或者图片本身就很大但是部分显示不完全 3）contain图像完全显示出来，高度宽度完全适应内容区域

背景简写：background里面属性没有顺序要求（而且建议简写）

背景支持多背景一起设置（但ie8以下不支持多背景设置）--多个背景设置之后是堆叠在一起的 在属性值书写在前面的将覆盖后面的。

例子：

background-image: url(image.png), url(background-tile.png);
background-repeat: no-repeat, repeat;

背景的渐变：背景的渐变是用linear-gradient（）来实现渐变的

例如：

div {
background-image: linear-gradient(to bottom, orange, yellow);
}

这个渐变效果是从上到下，从顶部的橙色开始，然后平稳过渡到底部的黄色。

可以使用关键字来指定方向 （to bottom，to right， to bottom right等）， 或角度值 (0deg相当于 to top，90deg 相当于 to right，直到 360deg，它再次相当于 to top ）

你可以个背景渐变设置每一个颜色显示的距离

例如：

div {
background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);
}

元素边框

元素边框是围绕元素内容和内边距的一条线或者多条线（边框是绘制在背景之上的）

边框属性与属性值：

属性	描述	属性值与注意
border（简写）	组合边框的书写顺序为：宽度、样式、颜色	样式是一定要给的
border-style	定义边框的样式可以组合书写每条边的样式：border-style:上 右 下 左 或者单独定义也可以：border-left-style：solid（设置左边框为实线）	none（默认）、hidden、solid、dotted（点状边框）、dashed（虚线）、double（双线）、inset、outset、groove（3D凹槽边框）、ridge（3D垄装边框）
border-width	同上	h值有:px、em、thin（细）、medium、thick（粗）
border-color	同上	是有transparent属性值的
border -radius	单独设置为：border-top-left-radius	设置圆角：border -radius：20px 设置椭圆形角：border -radius： 10px / 20px