260720 HTML/CSS 学习笔记

1.  box-sizing 属性

content-box 的 width 仅为 content 部分，不包含 border & padding

border-box 的 width 含 content, border & padding

 

以上 width 皆不含 margin

 

2. box-shadow 属性

例如

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

box-shadow: <inset>, <length>, <length>, <length>, <length>, <color>

 

当出现两个、三个和四个 <length> 值时：

• 两个：<offset-x><offset-y> 即 x, y 的偏移量

　　　　x, y 的正值分别往右边、下面偏移，负值则向左边，上面偏移。

• 三个： 第三个被当成 <blue-radius> 

　　　　该值越大，模糊的面积约大

• 四个： 第四个被当成 <spread-radius>

　　　　取正值时，阴影扩大；取负值时，阴影收缩。