收藏
回答

浮雕效果怎么实现?

回答关注问题邀请回答
收藏

4 个回答

  • 王志鹏
    王志鹏
    2021-02-22

    css box-shadow

    2021-02-22
    有用 1
    回复 3
    • 贝吉塔
      贝吉塔
      2021-02-22
      我尝试了很多次,能否提供下代码
      2021-02-22
      回复
    • 王志鹏
      王志鹏
      2021-02-22回复贝吉塔
      box-shadow: 0px 2px 2px 2px #000000;
      2021-02-22
      回复
    • 王志鹏
      王志鹏
      2021-02-22
      往那边偏  偏什么颜色自己可以调
      2021-02-22
      回复
  • 微盟
    微盟
    2021-02-23
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <style>
        body {
          background-color: #1d1c21;
          height: 400px;
          width: 100%;
        }
        .container {
          margin-top: 100px;
          width: 300px;
          height: 100px;
          border-radius: 20px;
          box-shadow: 3px 3px #010101, -1px -1px #47474b;
        }
        .flex-center {
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
        .box {
          height: 100%;
        }
        .left,
        .right {
          display: inline-block;
          font-size: 40px;
          color: #f0f0f0;
        }
        .left {
          width: 80px;
          height: 80px;
          font-size: 20px;
          border-radius: 80px;
          box-shadow: 1px 1px #47474b, -2px -2px #010101;
        }
        .left-content {
          line-height: 80px;
          text-align: center;
        }
      </style>
      <body>
        <div class="container">
          <div class="box flex-center">
            <div class="left">
              <div class="left-content">手/自</div>
            </div>
            <div class="right">
              <span>自动</span>
            </div>
          </div>
        </div>
      </body>
    </html>
    

    剩下的自己补充吧

    2021-02-23
    有用
    回复 1
    • 贝吉塔
      贝吉塔
      2021-02-23
      感谢
      2021-02-23
      回复
  • 杰泥巴
    杰泥巴
    2021-02-22

    如果你真的尝试不出来,你可以让你家的UI切两张图片代替

    2021-02-22
    有用
    回复
  • 心心情
    心心情
    2021-02-22

    box-shadow和text-shadow了解一下


    2021-02-22
    有用
    回复 1
    • 贝吉塔
      贝吉塔
      2021-02-22
      我尝试了很多次了,我能写凹进去的
      2021-02-22
      回复
登录 后发表内容
问题标签