css3一些容易忘记的属性整理

css3 一些 容易忘记的 属性整理记录

1. box-shadow

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

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

2. box-sizing

1. content-box:
默认情况下(默认值content-box)，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
设置的属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

2. border-box 
设置的边框和内边距的值是包含在 width,height 内的

3. 线性渐变

语法:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认情况下）
#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

线性渐变 - 从左到右
#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

线性渐变 - 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}


使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
background-image: linear-gradient(angle, color-stop1, color-stop2);
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}
12点钟位置 为 0度，向右累加,


使用多个颜色节点
#grad {
  background-image: linear-gradient(red, yellow, green);
}


重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

4. 径向渐变

 径向渐变由它的中心定义。
 为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。
 同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

  径向渐变 - 颜色节点均匀分布（默认情况下）
  #grad {
      background-image: radial-gradient(red, yellow, green);
  }

  径向渐变 - 颜色节点不均匀分布
  #grad {
      background-image: radial-gradient(red 5%, yellow 15%, green 60%);
  }

  设置形状
  shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
  形状为圆形的径向渐变：
  #grad {
  background-image: radial-gradient(circle, red, yellow, green);
  }

  重复的径向渐变
  repeating-radial-gradient() 函数用于重复径向渐变：
  #grad {
      background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
  }