5.1盒子模型相关属性

边框属性

综合设置

border: 宽度 样式 颜色 ;

单个设置边框属性取值时

边框属性取1个值时，表示4个方向的宽度一样
边框属性取2个值时，上下 , 左右
边框属性取3个值时，上 , 左右 , 下
边框属性取4个值时，顺时针 上、右、下、左

边框线条样式

边框宽度

注意：要使边框宽度有效，必须保证border-style的属性值不是none，反之要使边框风格属性设置有效，必须保证不能显示设置边框宽度为0.

边框颜色

圆角边框 border-radius: ;

图片边框

边距属性

背景属性 background

背景颜色——background-color

例如：

body {
   background-color: #C0C0C0;
}
h1 {
   background-color: rgb(135,206,235);
}
p {
   background-color: LightGreen;
}

背景图像——background-image

background-image属性中的元素可以设置一个或几个背景图像。
URL指定路径的图像文件。相对路径和绝对路径均受支持。
默认情况下，背景图像放置在元素的左上角，并在垂直和水平方向重复以覆盖整个元素。

为

元素设置背景图片

p {
   padding: 30px;
   background-image: url("1.jpg");
   color: white;   
}

注意：要制定多个图像，只需用都好分隔URL

背景重复——background-repeat

• repeat-x：图片延x轴复制
• repeat-y：图片延y轴复制
• Inherited：继承父级属性相同的指定值
• no-repeat:不重复，只有单个图片

例如：

body {
   background-image: url("1.png");
   background-repeat: repeat-x;
}
p {
   background-image: url("1.png");
   background-repeat: inherit;
   margin-top: 100px;
   padding: 40px;
}

背景的附件（固定于滚动）——background-attachment

• fixed：固定背景图片
• scroll：向下滚动页面是，背景也随着滚动
• Inherit：继承

例如：

body {
   background-image: url("1.png");
   background-repeat: no-repeat;
   background-attachment: scroll;
}

背景于图片不透明度的设置

背景图像平铺

背景图像位置

设置背景图像的固定

设置背景图像的大小

设置背景显示的区域

设置背景图像的剪裁区域

background-clip:border-box;/* 表示从边框向外裁剪背景，border-box是background-clip的默认值 */
background-clip:padding-box;/* 表示从内填充（padding）向外裁剪背景 */
background-clip:content-box;/* 表示从内容区域向外裁剪背景 */   常用值
background-clip:no-clip;/* 表示不裁剪 */

  background-color: #3FB9FB;
  background-image: url('http://resource.soulbuddy.cn/public/images/miniprogram/bg.png');
  background-size:100% 100%;
  background-repeat: no-repeat;

设置多重背景图像

div {
    width: 200px;
    height: 200px;
    border: 1px dashed #ccc;
    background-color: yellow;
    background-repeat: no-repeat;
    background-position: left top, right bottom;
    background-image: url(img/bg.gif), url(img/bg2.gif);
}

默认情况下，背景图像从元素的左上角开始显示，并会在水平方向和垂直方向重复。如果多重背景图像之间存在交集（即背景相互重叠），前面定义的背景图像会覆盖在后面定义的背景图像之上。
所以，定义多背景时，还需要设置背景图像的显示位置和平铺方式。否则，背景重叠的区域会发生覆盖，影响甚至看不出多重背景的效果。如：

背景复合属性

书写格式
background : background-color background-image background-repeat background-attachment
background-position;
默认值
background: transparent none repeat scroll 0% 0%;
默认值(中文意思)
background: 透明 / 无背景图片 / 平铺 / 背景图片随文本滚动 /位于元素左上角

css渐变属性

https://blog.csdn.net/HU_YEWEN/article/details/90604792
渐变可以使得元素背景更加有灵性并具有生气，虽然我们可以使用背景图片来呈现渐变效果，但却是不够灵活，当想要改变颜色时需要使用图片编辑器重新编辑，而渐变则可以在代码中直接改变颜色就可以了。

线性渐变

background: linear-gradient(direction, color1, color2 [stop], color3...);

1..direaction：表示线性渐变的方向。有以下三种表示方法。
（1）渐变方向

• to left：设置渐变为从右到左。
• to bottom：设置渐变从上到下。这是默认值。
• to right：设置渐变从左到右。
• to top：设置渐变从下到上。

也可以是to left top、to left bottom、to right top、to right bottom四个对角线方向。
（2）方向起点

• top：设置渐变从上到下。这是默认值。
• bottom：设置渐变从下到上。
• left：设置渐变从左到右。
• right：设置渐变为从右到左。

也可以是left top、left bottom、right top、right bottom四个对角线方向。
（3）角度（angle）
角度用数字+单位来进行表示，单位使用deg。所有的颜色都是从中心出发，0deg是to top的方向，顺时针是正，逆时针是负。

• 0deg相当于to top
• 90deg相当于to right
• 180deg相当于to bottom，这是默认值
• 270deg或者 - 90deg相当于to left

2、color- * ：表示渐变中的过度颜色，一般第一个表示渐变起始颜色，最后一个表示渐变的结束颜色，中间表示中间过度颜色。
3、stop：color后面可以加上stop，stop可以使百分值也可以是像素值，表示某个颜色在stop位置处固定，如下：

background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red);

重读线性渐变

background: repeating-linear-gradient(#f00 0,#f00 10%,#ff0 10%,#ff0 20%);
以上红色从0开始渐变，到达10%时还是红色，所以形成红色条纹，在10%后变为黄色，直到20%还是黄色，
所以此时形成黄色条纹，然后渲染时会将这20%的红黄条纹进行重复的渐变，使得呈现出红黄条纹相间

background: repeating-linear-gradient(45deg,#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

径向渐变（radial-gradient）

径向渐变指从一个中心点开始沿着四周产生渐变效果。由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。

<radial-gradient> = radial-gradient([ [<shape> || <size>] [ at <position> ]? ,
| at <position>, ]?<color>[stop]?[ ,<color>[stop]?]+)

// 圆心位置
<position> = [ <length> | <percentage> | left | center | right ]? [ <length> | 
<percentage> | top | center | bottom ]?  //默认处于中心点
// 渐变形状
<shape> = circle | ellipse  //默认是ellipse
// 渐变大小
<size> = <extent-keyword> | [ <circle-size> || <ellipse-size>]
<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
<circle-size> = <length>
<ellipse-size> = [ <length> | <percentage> ]{2}
<shape-size> = <length> | <percentage>
// 渐变颜色及颜色位置
<color>[stop]? = <color> [ <length> | <percentage> ]?