欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

實(shí)現(xiàn)CSS圓環(huán)的5種方法(小結(jié))

  發(fā)布時(shí)間：2018-09-05 15:23:18   作者：LXY224   我要評論
這篇文章主要介紹了實(shí)現(xiàn)CSS圓環(huán)的5種方法(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

想到去年面試實(shí)習(xí)的時(shí)候被問到實(shí)習(xí)圓環(huán)的問題，特意寫篇文章總結(jié)一下吧！總結(jié)了一下大概有5種方法。


 

1. 兩個(gè)標(biāo)簽的嵌套：

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

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%);
        }

如果大家有其他的方法，請告訴我吧，謝謝?。?！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論