首頁  >  文章  >  web前端  >  如何利用css實現圓環效果

如何利用css實現圓環效果

王林
王林轉載
2020-08-21 17:02:273797瀏覽

如何利用css實現圓環效果

css實現圓環效果有多種方法,這裡為大家分享五種方法:

(推薦教學:CSS教學

首先我們來看看實現效果:

如何利用css實現圓環效果

接下來為大家介紹方法:

1、兩個標籤的嵌套

<div class="element1">
    <div class="child1"></div>
</div>
.element1{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .child1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }

2、使用偽元素,before/after

<div class="element2"></div>
.element2{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .element2:after{
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }

3、使用border:

<div class="element3"></div>
 .element3{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            border: 50px solid lightpink ;
        }

(學習影片推薦:css影片教學

4、使用border-shadow

<div class="element4"></div>
.element4{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink ;
            margin: auto;
        }
<div class="element5">
  .element5{
            width: 200px;
            height: 200px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink inset;
            margin: auto;
        }

5、使用radial-gradient

<div class="element6"></div>
.element6{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);
        }

以上是如何利用css實現圓環效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除