C3教程笔记day2

c3day2

盒模型

css3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1. box-sizing:border-box 盒子大小为width
2. box-sizing:content-box 盒子大小为width+padding+border

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

边框

边框圆角 border-radius

圆角处理时，以盒子的四个角为基础，设定半径做圆，圆以外的部分被切除，这样就得到了一个椭圆，正圆是椭圆的一种特殊情况。

代码示例

border-radius:10px 10px 10px 10px;

边框阴影：box-shadow

与文字阴影相似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。

如： box-shadow:5px 5px 5px #ccc;

1. 水平偏移量，正值向右，负值向左；
2. 垂直偏移量，正值向下，负值向上；
3. 模糊度，必须为正值；
4. inset 可以设置内阴影；

设置边框阴影不会改变盒子的大小。

背景

1. background-size:

• 通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
• 其参数设置：
  1、可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
  2、设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
  3、设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

2. background-origin:

• 通过background-origin可以设置背景图片定位(background-position)的参照原点。
• 参数设置：
  border-box以边框做为参考原点；
  padding-box以内边距做为参考原点；
  content-box以内容区做为参考点；

3. background-clip:

• 通过background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小。
• 参数设置：
  border-box裁切边框以内为背景区域；
  padding-box裁切内边距以内为背景区域；
  content-box裁切内容区做为背景区域；

4. 多背景：

• 以逗号分隔可以设置多背景，可用于自适应布局。

渐变

线性渐变

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

1. 必要的元素：

• 方向
• 起始色
• 终止色
• 渐变距离

2. 关于方向
   设置渐变方向，可以用关键字totop、tonigh，也可用角度（正负值均可）如45deg、-90deg等。

径向渐变

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果。

1. 必要的元素：

• 辐射范围即圆半径
• 中心点，即圆的中心
• 渐变起始色
• 渐变终止色
• 渐变范围

2. 中心位置参照的是盒子的左上角，例如background-image: radial-gradient(120px at 0 0 yellow green)其圆心点为左上角，background-image: radial-gradient(120px at 0 100% yellow green)其圆心为左下角。
3. 关于辐射范围
   其半径可以不等，即可以是椭圆，如background-image: radial-gradient(120px 100px at 0 0 yellow green)会是一个椭圆形（横轴120px、纵轴100px）的渐变。

如有不明之处，请与本博客作者联系，欢迎有共同爱好者来一起讨论研究。上文是我自己理解，如有出入之处请谅解，并指出，不胜感激。