首页 教程资源正文

有5种方法实现CSS圆环

娜迦源码 教程资源 2019-03-26 01:53:31 258 0 教程资源

想到去年面试实习的时候被问到实习圆环的问题,特意写篇文章总结一下吧!总结了一下大概有5种方法。


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

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

如果大家有其他的方法,请告诉我吧,谢谢!!!

以上就是本文的全部内容,希望对大家的学习有所帮助


版权声明

1:如非特殊说明,本站对提供的源码不拥有任何权利,其版权归原著者拥有。

2:请勿将该源码、软件进行商业交易、转载等行为,该源码、软件只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。

3:本网站所有源码和软件均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。如有侵犯你版权的,请来信(邮箱:393249296@qq.com)指出,本站将立即改正。

本文链接:https://www.wsx6.cn/post/690.html

分享:

支付宝

微信

嘿,我是客服
请先 登录 再评论,若不是会员请先 注册