box-shadow和text-shadow

351 阅读3分钟

box

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协议可能不同
    • 因此我们最好引入所有不同后缀名的同一字体文件,防止浏览器不兼容