首頁(yè) 猿問(wèn) css如何實(shí)現(xiàn)內(nèi)凹圓陰影效果

css如何實(shí)現(xiàn)內(nèi)凹圓陰影效果

PHP

千萬(wàn)里不及你 2019-03-05 19:21:19

內(nèi)凹圓帶陰影效果要如何實(shí)現(xiàn)才好。

查看完整描述

3 回答

MMMHUHU

TA貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊

左右各自定位一個(gè)div

2 反對(duì) 回復(fù) 2019-03-18

qq_慕粉2392994
今天也遇到有這種寫(xiě)內(nèi)圓角的需求，也是自己想了下用了兩個(gè)div用定位的形式實(shí)現(xiàn)的這種效果。

回復(fù) 2020-12-11

holdtom

TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊

效果圖：

HTML 結(jié)構(gòu)：

<body>
  <div class="content-wrap">
    <div class="left-icon"></div>
    <div class="right-icon"></div>
  </div>
</body>

CSS樣式：（陰影范圍題主可以修改）

<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #f8f8f8;
  }

  .content-wrap {
    position: relative;
    width: 500px;
    height: 800px;
    background-color: #fff;
    box-shadow: 0 0 2px 2px lightgray;
  }

  .left-icon::before, .right-icon::before {
    position: absolute;
    content: '';
    top: 300px;
    width: 40px;
    padding: 20px 0;
    border-radius: 50%;
    box-shadow:  0px 0px 2px 2px lightgray inset;
    background-color: #f8f8f8;
  }
  .left-icon::before {
    left: -20px;
  }
  .right-icon::before {
    right: -20px;
  }
  .left-icon::after, .right-icon::after {
    position: absolute;
    top: 300px;
    content: '';
    width: 20px;
    height: 40px;
    background-color: #f8f8f8;
  }
  .left-icon::after {
    left: -22px;
  }
  .right-icon::after {
    right: -22px;
  }

反對(duì) 回復(fù) 2019-03-18