持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情。

阴影

text-shadow文本阴影：

text-shadow: h-shadow v-shadow blur color;
h-shadow    必需，水平阴影的位置，允许负值
v-shadow    必需，垂直阴影的位置，允许负值
blur        可选，模糊的距离
color        可选，阴影的颜色时

text-shadow：设置文本阴影： text-shadow: 20px 20px 20px pink; 水平位移垂直位移模糊程度阴影颜色
border-radius：边框圆角 border-top-left/right；border-bottom-left/right
border-shadow：边框阴影
box-shadow：盒子阴影
text-shadow：文本阴影
border-radius：边框圆角
background：背景
clip-path：裁剪图形(创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏)

a 标签样式

CSS中超链接四种状态必须固定顺序：a: link a: visited a: hover a: active 不安顺序将失效

a:link        链接的样式
a:visited       鼠标点击之后
a:hover         鼠标覆盖之后
a:active        鼠标按下不松开时的样式
cursor        各种光标的样式        - pointer  手型
一个大的模块一般会用id 定义样式，然后在它的里面用class

盒模型

box-sizing：content-box；(标准盒模型) box-sizing：border-box；(IE盒模型)

盒模型：
    - width     宽度       
    - height        高度
    - background-color      背景颜色
    - background-image      背景图片
    - border    边框                
    - padding       内边距(定义容器内部，它和padding的宽度会成为整个容器的一部分)
    - margin    外边距(顺时针，上右下左)   margin() 指定顺序： 上右下左
标准盒子模型：
    box-sizing：content-box;    
    width = content             (额外计算border和padding的值)
IE盒子模型：
    box-sizing：border-box;    
    width = count + padding + border
    *{box-sizing: border-box}

盒模型 每个HTML元素都可以叫作盒模型。盒模型由外向内包括：边距(margin) 边框(border)、填充(padding)、内容(content) 它在页面中实际宽度是 margin + border + padding + content 的宽度相加设置 box-sizing：content-box(W3C)/border-box(IE) 就可以自由切换两种盒模型

标准盒模型 width 和 height 指的是内容区域的宽、高 IE盒模型 width 和 height 指的是内容区域+border+padding

BFC 块级格式化上下文 ，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用(可以用来自适应布局、可以清除浮动) 就是一个特殊的块，内部有自己的布局，不受外边元素的影响

原理；1、BFC内部子元素，在垂直方向，边距会发生重叠 2、BFC是独立的容器，外面的元素不会影响里面的元素 3、BFC不与旁边的float box区域重叠 4、计算BFC高度时，浮动的子元素也参与计算

生成 BFC overflow：不为visible，可以让属性是 hidden、auto 浮动中，float 的属性值不为 none，只要设置了浮动，当前元素就创建了BFC 定位中，只要position 的值不是 static 或 relative即可。即 absolute 或 fixed 生成BFC display 为 inline-block、table-block、table-cell、table-caption、flex、inline-flex

一旦一个元素浮动了，那么将能够并排，并且能设置宽高了、标准流中的文字不会被浮动的盒子遮挡住

清除浮动：给元素的祖先设置高度； clear: both； overflow: hidden;(overflow 规定当前元素溢出元素框时发生的事情) visible 内容会呈现在元素框之外 hidden 内容被剪辑，其余内容不可见

坚持渐进增强原则：让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好
优雅降级 认为应该针对最高级的浏览器设计网站

CSS学习笔记(伍)

阴影

a 标签样式

盒模型