阴影

CSS中阴影主要有box-shadowtext-shadow两种,恰当的使用阴影,能让页面扁平无聊的页面瞬间变得具有立体的美感。

阴影基本使用

text-shadow

<span id="shadow-demo1">test</span>
#shadow-demo1 {
    /* offset-x | offset-y | blur-radius | color */
    text-shadow: 3px 3px 10px rgb(0, 0, 0);
}
  • offset-x:阴影X轴偏移
  • offset-y:阴影Y轴偏移
  • blur-radius:模糊半径
  • color:颜色

box-shadow

<div id="shadow-demo2"></div>
#shadow-demo2 {
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 2px 2px 10px 10px rgba(0, 0, 0, 0.2);
}
  • offset-x:阴影X轴偏移
  • offset-y:阴影Y轴偏移
  • blur-radius:模糊半径
  • spread-radius:阴影半径
  • color:颜色

blur-radiusspread-radius的区别其实很明显:

  • blur表示模糊,该半径越大,阴影约模糊,反之越锐利
  • spread表示传播,其实就是指定阴影大小

如果加一个inset,可以将外阴影变为内阴影,例如box-shadow: inset 2px 2px 10px 10px rgba(0, 0, 0, 0.2)

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap