css如何做圆环的菜单

发布网友发布时间：2022-04-06 11:37

共5个回答

懂视网时间：2022-04-06 15:58

这篇文章主要介绍了实现CSS圆环的5种方法(小结)，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

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

1. 两个标签的嵌套：

<p class="element1">
 <p class="child1"></p>
</p>

.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

<p class="element2"></p>

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

<p class="element3"></p>

 .element3{
  width: 100px;
  height: 100px;
  background-color: #009966;
  border-radius: 50%;
  border: 50px solid lightpink ;
 }

4. 使用border-shadow

<p class="element4"></p>

.element4{
  width: 100px;
  height: 100px;
  background-color: #009966;
  border-radius: 50%;
  box-shadow: 0 0 0 50px lightpink ;
  margin: auto;
 }

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

<p class="element6"></p>

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

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

总结：

热心网友时间：2022-04-06 13:06

用css写你首先要想清楚你是否还要考虑在ie中的现实效果，ie9以下的版本并不支持楼上这种写法的“border-radius:50% ”。要想兼容ie9一下的就得用图片

热心网友时间：2022-04-06 14:24

border-radius:50% /*宽高相等的正圆，如果不等则是较短一边数值一半*/

热心网友时间：2022-04-06 15:59

border-radius:50%

热心网友时间：2022-04-06 17:50

list-style-image 使用图像来替换列表项的标记。