Html5第六章_2

6-36  css边框

元素的边框就是围绕元素内容和内边距的一条或多条线。

元素的边框属性：

1. border 简写属性，用于把针对四个边的属性设置在一个声明。
2. border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
   1. 常用单位为像素(px)、em
   2. thin细的边框。/medium 默认/thick 定义粗的边框。

border: 2px red solid;  //用到border-width时需先定义border

border-width: 5px 20px;  //设置左右边框为20px，上下5px。

1. border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-style:dotted dashed;   //都是复合属性

1. none 定义无边框。
2. dotted 定义点状边框
3. dashed 定义虚线
4. solid 定义实线。
5. double 定义双线    //线宽需大于2px
6. groove 定义 3D 凹槽边框。
7. ridge 定义 3D 垄状边框。
8. inset 定义 3D inset 边框
9. outset 定义 3D outset 边框。

3. border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
4. border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
5. border-bottom-color 设置元素的下边框的颜色。
6. border-bottom-style 设置元素的下边框的样式。
7. border-bottom-width 设置元素的下边框的宽度。
8. border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
9. border-left-color 设置元素的左边框的颜色。

border-color: pink blue;  //左右蓝色，上下红色

10. border-left-style 设置元素的左边框的样式。
11. border-left-width 设置元素的左边框的宽度。
12. border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
13. border-right-color 设置元素的右边框的颜色。
14. border-right-style 设置元素的右边框的样式。
15. border-right-width 设置元素的右边框的宽度。
16. border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
17. border-top-color 设置元素的上边框的颜色。
18. border-top-style 设置元素的上边框的样式。
19. border-top-width 设置元素的上边框的宽度。

CSS3新增的边框属性：

1. border-radius 设置所有四个 border-radius 属性的简写属性。

border-radius: 20px;  //20px是圆角的半径

1. * 同时设定四个角的圆角
2. ** 分别设定左上 右下、左下 右上圆角
3. *** 分别设定左上 、左下 右上、右下圆角
4. **** 分别设定左上 、右上、右下、左下圆角
   1. border-top-left-radius 左上角圆角边框

border-top-left-radius: 2em 4em; 

2. border-top-right-radius 右上角圆角边框
3. border-bottom-right-radius 右下角圆角边框
4. border-bottom-left-radius 左下角圆角边框

border-radius:3em/1em; //同时定义四个方向的圆角：x方向3em，y方向1em

2. border-image 设置所有 border-image属性的简写属性。
   1. border-image 边框使用图像来填充
      1. border-image-source 图像来源路径
      2. border-image-slice 边框背景图的分割方式

3. border-image-width 边框厚度
4. border-image-outset 边框背景图的扩展(边框图像区域超出边框的量。)
5. border-image-repeat 边框图像的平铺方式:stretch拉伸/repeat重复铺满/round重复铺满并对图片进行调整

stretch:

repeat：

round：

#div4{        

border-image-source: url(jay100px.jpg);

border-image-slice:30;  //九宫格的切割方式（图片像素为90px，分三份）

border-image-width: 20px 30px; //设置上下、左右的边框宽度

border-image-outset:30px; //将图片边框设置成div外面的距离

border-image-repeat: round; 

}

============================

border-image-repeat: round;

border-image-slice:30 fill;   //填满

============================

border-image-repeat: stretch;

border-image-slice:30 fill;

============================

border-image-repeat: stretchround;

border-image-slice:30 fill;

============================

合并写法：

#div5{

border-image:url(jay100px.jpg) 30 /20px /30px round;

}

//其中，‘/20px /30px’  是要定义20px的边框宽，30px的外边框距离。如果写成了  /20px 30px 则是上下边框20px，左右边框30px

3. box-shadow 向方框添加一个或多个阴影。
   1. none： 无阴影
   2. 阴影水平偏移值/阴影垂直偏移值/阴影模糊值/阴影外延值/阴影的颜色/inset内阴影(默认值为outset)

前两个是必填

#div1{

box-shadow: 5px 5px 5px;

}

#div1:hover{

box-shadow: -5px 5px 5px;

}   //hover 当鼠标悬浮在元素上方时，向元素添加样式。

============================

#div2{

box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.4);

}   //半透明阴影效果

============================

#div4{

box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.4),

0px 0px 0px 10px rgba(123,100,0,0.4);

}  //添加外延值（第四个px值）

===========================

#div5{

box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.4) inset,

0px 0px 0px 10px rgba(123,100,0,0.4) inset;

}  //内阴影

//偏移量为0时，outset不能省略

6-41 css背景

元素的背景属性：

1. background 简写属性，作用是将背景属性设置在一个声明中。
   1. background-attachment 背景图像是否固定或者随着页面的其余部分滚动。scroll 默认值。/fixed 当页面的其余部分滚动时，背景图像不会移动。
   2. background-color 设置元素的背景颜色。

相当于background

3. background-image 把图像设置为背景。

background-repeat: no repeat //背景不重复（背景图片比较小时）

background-repeat: repeat-y;  // y方向重复

#div2{

background: green url(jay50px.jpg) repeat-y;

}  //可以写在一起，没有顺序要求

4. background-position 设置背景图像的起始位置。
   1. left/right/center/bottom/top这几个属性值可以两两组合使用，如果只规定了一个关键词，那么第二个值将是"center"。

#div1{

background: url(jay50px.jpg) no-repeat;

background-position: 50%;

}

2. x% y% 第一个值是水平位置，第二个值是垂直位置;左上角是 0% 0%。右下角是 100% 100%;如果仅规定了一个值，另一个值将是 50%。
3. x y 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。

5. background-repeat 设置背景图像是否及如何重复。repeat/repeat-x/repeat-y/no-repeat

CSS3新增的背景属性：

1. background-size 规定背景图片的尺寸。
   1. 像素/百分比设置宽高
   2. cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
   3. contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
2. background-clip 规定背景的绘制区域。
   1. border-box 背景被裁剪到边框盒
   2. padding-box 背景被裁剪到内边距框。
   3. content-box 背景被裁剪到内容框。
3. background-origin 规定背景图片的定位区域。
   1. padding-box 背景图像相对于内边距框来定位。
   2. border-box 背景图像相对于边框盒来定位。
   3. content-box 背景图像相对于内容框来定位。