ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで角丸と凹面効果を実現する方法

CSSで角丸と凹面効果を実現する方法

王林
王林転載
2020-07-14 17:05:434887ブラウズ

CSSで角丸と凹面効果を実現する方法

実装アイデア:

(推奨チュートリアル: css クイック スタート)

2 つの div を並べて 2 番目に表示幅と高さの 2 倍の item という名前の div を定義し、その項目に border-radius: 50% を設定して、絶対配置します。

コード実装:

<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>

実装効果:

CSSで角丸と凹面効果を実現する方法

以上がCSSで角丸と凹面効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。