头像
浮雕阴影
admin 发表于 2022-03-14 14:56:45

2652 3 0

有一类立体效果的阴影就是浮雕阴影,它的本质还是 box-shadow 和 text-shadow,只是需要控制好颜色的配合以及内外阴影的一起使用。核心就是 2 点:

  1. 背景色与内容(文本或者盒子颜色)一致
  2. 使用两个相反的方向,使用两组对比明显的颜色值,来实现凹凸效果。

 

html, body {
    width: 100%;
    height: 100%;
    display: flex;
    background: #999;
}

div {
    width: 200px;
    height: 200px;
    margin: auto;
    font-size: 108px;
    white-space: nowrap;
    text-align: center;
    color: #999;
    text-shadow:
        1px 1px 1px #000,
        -1px -1px 1px #fff;
}

div:nth-child(2) {
    text-shadow:
        1px 1px 1px #fff,
        -1px -1px 1px #000;
}

 

──── 0人觉得很赞 ────
最新回复 (3)
  • 头像
    Vincent 发表于 2022-03-16 15:59:01
    0 引用 沙发
    小手一抖,经验到手,为了升级,到处游走,纯  属路过,不要介意,高抬贵手,立马飘走...
  • 头像
    独乐乐 发表于 2022-04-02 10:54:09
    0 引用 板凳
    非常棒!!!
  • piaoxue888 发表于 2022-12-23 13:45:09
    0 引用 地板
    小手一抖,经验到手
    • 折腾BBS
      5
        登录 注册 QQ登录