如何在css中實(shí)現(xiàn)圓角內(nèi)凹效果

發(fā)布時(shí)間：2020-07-22 09:22:57 來源：億速云閱讀：611 作者：Leah 欄目：web開發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何在css中實(shí)現(xiàn)圓角內(nèi)凹效果，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

兩個(gè)并排的div，在第二個(gè)div內(nèi)定義一個(gè)2倍寬高的名為item，對(duì)item進(jìn)行設(shè)置border-radius: 50%，再對(duì)其進(jìn)行絕對(duì)定位。

代碼實(shí)現(xiàn)：

<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <style>
    .box {
      width: 50px;
      height: 50px;
      overflow: hidden;
      background: #655;
      text-align: center;
      position: relative;
      float: left;
    }
    .item {
      width: 100px;
      height: 100px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      top: -50px;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box">
    <div class="item"></div>
  </div>
</body>
</html>

實(shí)現(xiàn)效果：

如何在css中實(shí)現(xiàn)圓角內(nèi)凹效果

上述就是小編為大家分享的如何在css中實(shí)現(xiàn)圓角內(nèi)凹效果了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

如何在css中實(shí)現(xiàn)圓角內(nèi)凹效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽