背景与边框

CSS Backgrounds and Borders Module CSS Background

背景样式

background-color 属性定义了CSS中任何元素的背景颜色。背景色扩展到元素的内容和内边距的下面。
background-image 默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。
- 背景支持渐变 gradient background-imaage
```
  .b {
      background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
      background-size: 100px 50px;
  }
```
- 也可以有多个背景图像——在单个属性值中指定多个background-image值，用逗号分隔每个值。背景将与最后列出的背景图像层在堆栈的底部，背景图像在代码列表中最先出现的在顶端。其它 background-*属性，该属性值用逗号分隔的方式设置。不同属性的每个值，将与其他属性中相同位置的值匹配。例如下列background-image：
```
  background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
  background-repeat: no-repeat, repeat-x, repeat;
  background-position: 10px 20px,  top right;
```
background-repeat控制图像的平铺行为。
- no-repeat 不重复
- repeat-x 在X方向重复
- repeat-y 在Y方向重复
- repeat 在两个方向重复
background-size它可以设置长度或百分比值，来调整图像的大小以适应背景。
- cover 浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
- contain 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
background-postion属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。
- background-position: top center;
- background-position: 20px 10%;
- background-position: top 20px;
- 使用4-value语法来指示到盒子的某些边的距离: background-position: top 20px right 10px;
background-attachment
- scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
- fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。
- local: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。

背景简写

这种简写允许您一次设置所有不同的属性。

background-color 只能在逗号之后指定。
background-size 值只能包含在背景位置之后，用’/’字符分隔，例如：center/80%。

.box {
  background:   
    linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat, 
    rebeccapurple;
}

边框样式

border 与 border-image

细粒度的边框样式配置

三种不同的属性更细粒度的分边配置例子

  .box {
      border-top-width: 1px; //边框的宽度
      border-top-style: solid;//边框的类型
      border-top-color: black;//边框颜色
  } 

边框宽度

border-left-width border-top-width border-right-width border-bottom-width

边框类型

border-left-style

      /* <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset */
      /* Keyword values */
      border-left-style: none;
      border-left-style: hidden;
      border-left-style: dotted;
      border-left-style: dashed;
      border-left-style: solid;
      border-left-style: double;
      border-left-style: groove;
      border-left-style: ridge;
      border-left-style: inset;
      border-left-style: outset;

      /* Global values */
      border-left-style: inherit;
      border-left-style: initial;
      border-left-style: unset;

border-top-style border-right-style border-bottom-style

边框颜色 border-left-color border-top-color border-right-color border-bottom-color

border简写

border-width是下面更简化的框宽度配置的简写

/* 用法一：明确指定宽度值 */
/* 当给定一个宽度时，该宽度作用于选定元素的所有边框 */
border-width: 5px;
/* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 */
border-width: 2px 1.5em;
/* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
border-width: 1px 2em 1.5cm;
/* 当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 （即按顺时针依次作用） */
border-width: 1px 2em 0 4rem;

/* 用法二：使用全局关键字 */
/* 可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置） */
border-width: inherit;

/* 用法三：使用作用于 border-width 的关键字 */
border-width: thin;
border-width: medium;
border-width: thick;

border-style border-style 默认值是 none，这意味着如果您只修改 border-width 和 border-color 是不会出现边框的。

/* Default */
border-style: none;
/* Apply to all four sides */
border-style: dashed;

/* horizontal | vertical */
border-style: dotted solid;

/* top | horizontal | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;

border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color

/* border-color: color; 单值语法 */
border-color: red;

/* border-color: vertical horizontal; 双值语法*/
border-color: red #f015ca;

/* border-color: top horizontal bottom; 三值语法 */
border-color: red yellow green;

/* border-color: top right bottom left; 四值语法 */
border-color: red yellow green blue;

border-color: inherit

Border更简化

border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。

虽然border-width,、border-style和 border-color 简写属性接受最多4个参数来为不同的边设置宽度、风格和颜色，但boder属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。

Examples: 可以列出的一个，两个或三个值来指定border属性。值的顺序无关紧要。如果边框的样式未定义，它将不可见。这是因为样式默认为none。

border: solid;
border: dashed red;
border: 1rem solid;
border: thick double #32a1ce;
border: 4mm ridge rgba(170, 50, 220, .6);

边界border和轮廓outline很相似。然而轮廓在以下方面与边界不同

轮廓不占据空间，他们在元素内容之外绘制
根据规范，轮廓不必为矩形，尽管通常是矩形。

更多用法

Border-image

border-image CSS属性允许在元素的边框上绘制图像。使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。若 border-image-source（此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示，则将应用 border-style。语法及初始值：

border-image-source: none 
border-image-slice: 100%
border-image-width: 1
border-image-outset: 0
border-image-repeat: stretch

border-image-source声明元素的边框图片（border-image）的资源

  /* no border-image, use the specified border-style */
  border-image-source: none;

  /* the image.jpg is used as image */
  border-image-source: url(image.jpg);

  /* a gradient is used as image */
  border-image-source: linear-gradient(to top, red, yellow);

  /* Global values */
  border-image-source: inherit;
  border-image-source: initial;
  border-image-source: unset;

border-image-slice border-image-slice属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

  /* All sides */
  border-image-slice: 30%;

  /* vertical | horizontal */
  border-image-slice: 10% 30%;

  /* top | horizontal | bottom */
  border-image-slice: 30 30% 45;

  /* top | right | bottom | left */
  border-image-slice: 7 12 14 5;

  /* Using the `fill` keyword */
  border-image-slice: 10% fill 7 12;

  /* Global values */
  border-image-slice: inherit;
  border-image-slice: initial;
  border-image-slice: revert;
  border-image-slice: unset;

border-image-width属性 border-image-width 指定了边界图像 (border image) 的宽度, 如果本属性值大于元素的 border-width，边界图像将会向 padding 边缘延展

当指定一个值时，它将作用到四个方向；当指定两个值时，它将分别作用到垂直方向和水平方向；当指定三个值时，它将分别作用到上方、水平方向、和下方；当指定三个值时，它将分别作用到上方、右方、下方和左方。

  /* 关键字 */
  border-image-width: auto;

  /* 长度 */
  border-image-width: 1rem;

  /* 百分比 */
  border-image-width: 25%;

  /* 数值 */
  border-image-width: 3;

  /* 垂直 | 水平 */
  border-image-width: 2em 3em;

  /* 上 | 横向 | 下 */
  border-image-width: 5% 15% 10%;

  /* 上 | 右 | 下 | 左 */
  border-image-width: 5% 2em 10% auto;

  /* 全局值 */
  border-image-width: inherit;
  border-image-width: initial;
  border-image-width: unset;

border-image-outset

  /* border-image-outset: sides */
  border-image-outset: 30%;

  /* border-image-outset:垂直 水平 */
  border-image-outset: 10% 30%;

  /* border-image-outset: 顶 水平 底 */
  border-image-outset: 30px 30% 45px;

  /* border-image-outset:顶 右 底 左  */
  border-image-outset: 7px 12px 14px 5px;

  border-image-repeat: inherit;

border-image-repeatborder-image-repeat 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

  border-image-repeat: type                      /* One-value syntax */       E.g. border-image-value: stretch;
  border-image-repeat: horizontal vertical       /* Two-value syntax */       E.g. border-image-width: round space;

  border-image-repeat: inherit