Css圆环

圆环.png

1.两个标签嵌套

<style type="text/css">
    .parent{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: #000;
        position: relative;
    }
    .child{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color:#fff;
        position: absolute;
        top: 10px;
        left: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

2.伪元素，before、after

<style type="text/css">
    .parent{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: #000;
    }
    .parent::before{
        content: '';
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #fff;
        position: relative;
        top: 10px;
        left: 10px;
    }
    .child{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color:#fff;
        position: absolute;
        top: 10px;
        left: 10px;
    }
</style>
<div class="parent">
</div>

3.border

<style type="text/css">
    .parent{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #fff;
        border: 10px solid #000;
    }
</style>
<div class="parent">
</div>

4.box-shadow

<style type="text/css">
    .parent{
        width: 100px;
        height: 100px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 10px #000 ;
    }
</style>
<div class="parent">
</div>

5.radial-gradient

<style type="text/css">
    .parent{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: -webkit-radial-gradient( circle closest-side,#009966 90%,lightpink 10%)
    }
</style>
<div class="parent">
</div>