CSS 盒子的效果简介

一、盒子的圆角 border-radius

属性值简介

属性值写法	解释
当属性值为一个	对应的四个角都会发生变化
当属性值为两个	第一个值代表左上角、右下角； 第二个值代表右上角、左下角。
当属性值为三个	第一个值代表左上角； 第二个值代表右上角、左下角； 第三个值代表右下角。
当属性值为四个	第一个值代表左上角； 第二个值代表右上角； 第三个值代表右下角； 第四个值代表左下角。
水平半径 / 垂直半径	例如 border-radius：10px / 20px ， 那么四个角的水平半径为10px，垂直半径为20px
例如 border-radius：1px 2px 3px 4px / 5px 6px 7px 8px	那么四个角的水平半径分别为1px、2px、3px、4px，垂直半径分别为5px、6px、7px、8px

二、盒子的背景 background

 语法糖：

background: clip   color   url      repeat    position / size
          覆盖区域  颜色  图片链接   是否重复     位置      大小

 1. background-clip 背景绘制区域

background-clip:border-box;  // 默认值，背景被裁剪到边框盒。

background-clip:padding-box; // 背景被裁剪到内边距框。

background-clip:content-box; // 背景被裁剪到内容框。

2. background-color 背景颜色

// 规定颜色值为颜色名称的背景颜色。
background-color:red;

// 规定颜色值为十六进制值的背景颜色。
background-color:#ff0000;

// 规定颜色值为 rgb 代码的背景颜色。
background-color:rgb(255,0,0);

// 默认,背景颜色为透明。
background-color:transparent;

// 规定应该从父元素继承 background-color 属性的设置。
background-color:inherit;

3. background-image 背景图像

// 指向图像的路径。
background-image: url('图像的路径');

// 默认值。不显示背景图像。
background-color: none;

// 规定应该从父元素继承 background-image 属性的设置。
background-color: inherit;

4. background-repeat 重复背景图像

// 默认。背景图像将在垂直方向和水平方向重复。
background-repeat: repeat;

// 背景图像将仅显示一次。
background-repeat: no-repeat;

// 背景图像将在水平方向重复。
background-repeat: repeat-x;

// 背景图像将在垂直方向重复。
background-repeat: repeat-y;

// 规定应该从父元素继承 background-repeat 属性的设置。
background-repeat: inherit;

5. background-position 背景图像的起始位置。

1. 关键词（top、bottom、left、right）
   注意：规定了一个关键词，那么第二个值将是"center"

// 顶部居中
background-position: top;
// 左边居中
background-position: left;
// 绝对居中
background-position: center;
// ...等等

2. 百分比
   注意：规定了一个值，另一个值将是 50%

// 左上角
background-position: 0% 0%;

// 右下角
background-position: 100% 100%;

3. 距离（第一个值是水平位置，第二个值是垂直位置。）
   注意：规定了一个值，另一个值将是 50%

// 左上角。单位是像素 (0px 0px) 或任何其他的 CSS 单位
background-position: 0 0;

4. 组合

// 基于边缘只定偏移量，距离下边缘 10px ，距离右边缘 20px
background-position: bottom 10px right 20px;

小贴士：CSS Sprites 为了页面加载更快，便把小的图片合并到一张大图中，根据图标在大图的位置给背景定位。

6. background-size 背景图像的尺寸

1. 长度、百分比

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

百分比：以父元素的百分比来设置背景图像的宽度和高度。

2. 关键字

// 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
//  背景图像的某些部分也许无法显示在背景定位区域中。  

background-size: cover;

// 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 

background-size: contain;

三、盒子的阴影 box-shadow（阴影不占用空间）

// 语法
box-shadow: h-shadow v-shadow blur spread color inset;

小贴士：设置多重阴影，可以使用 “,” 隔开。如

box-shadow: 0 0 0 2px red,
            0 0 0 3px orange,
            0 0 0 4px yellow,
            0 0 0 5px green,
            0 0 0 6px blue,
            0 0 0 7px cyan,
            0 0 0 8px purple;