box
- 盒模型定义参考文章:zhuanlan.zhihu.com/p/291489867
- 盒子内部
box-sizing:content-box / border-box content:内容区 padding:内边距 border:边框
- 盒子外部
margin:外边距
content-box(标准盒模型)
- boxWidth = width + border2 + padding2
- width是内容区的宽度,width == contentWidth
border-box(怪异盒模型)
- boxWidth = width
- width是盒子的整体宽度
- contentWidth = width - border2 - padding2
适用场景
- 后端响应的数据固定了盒子的大小
- 内容区宽度(contentWidth)不固定,但内边距(padding)固定
- input框,产品经理给定了盒子的大小
box-shadow
How to use
- 参数
[inset] 水平阴影偏移 垂直阴影偏移 高斯模糊程度(blur) 整体扩大阴影(spread) 阴影颜色
- 内阴影扩大向内(inset)、外阴影扩大向外
- xoffset > 0 :右移
- yoffset > 0 :下移
- spread向四周延申,blur是以spread为边界去模糊(值越大、越模糊且范围越大)
- 阴影谁先写,它的z轴越靠近我们
- 重叠会叠加颜色变色
- 背景颜色在阴影的下面,文本在阴影的上面
<div class="box">center</div>
.box {
margin: 100px auto;
width: 100px;
height: 100px;
font-size: 20px;
color: #fff;
box-shadow: inset 0 0 10px 30px grey,
150px 70px 10px 0 #f0f,
100px 100px 10px 0 #0ff;
}
Example
炫酷圆(内阴影和外阴影多次叠加) 太阳(扩大阴影配合高斯模糊)
text-shadow
How to Use
- 参数
x y blur ShadowColor
Example
浮雕效果
- 左上白阴影、右下黑阴影(阳光从左上照下来)
- 给人一种感觉,阴影在右后
镂刻效果
- 左上黑阴影、右下白阴影(阳光从右下照上来)
- 给人一种感觉,阴影在左后
火焰效果
- 通过伪元素来添加文字,hover时更换阴影,并且显现伪元素添加的文字
body {
background-color: black;
}
.box {
width: 400px;
height: 100px;
font-size: 40px;
color: #fff;
position: absolute;
left: calc(50% - 200px);
top: calc(50% - 50px);
text-shadow: 0 0 10px #0f0,
0 0 20px #0f0,
0 0 30px #0f0;
transition: 0.6s;
}
div:hover {
text-shadow: 0 0 10px #f00,
0 0 20px #f10,
0 0 30px #f20;
}
div::before {
content: "NO ";
opacity: 0;
transition: 0.6s;
}
div:hover::before {
opacity: 1;
}
死神来了
- background-clip和text-shadow配合使用时,
- 由于用了background-clip:text所以改文字变为背景一部分,因此文字阴影更靠近我们
- 使用的背景图片
影分身
其实就是hover时候疯狂加text-shadow
描边效果
-webkit-text-stroke: 描边的大小 描边颜色
.box {
font-size: 60px;
font-weight: bold;
color: transparent;
-webkit-text-stroke: 2px red;
}
@font-face
中文字体包太大了,一般不引入过来 多用于引入小的字体包 MINE协议时Browser和Operation System的桥梁
- Browser内置MINE协议,而不同Browser的MINE协议可能不同
- 因此我们最好引入所有不同后缀名的同一字体文件,防止浏览器不兼容