html – CSS3 Moon Eclipse形状

概述如何在 CSS3中创建以下形状,而不使用像“：before”这样的伪类？ 我之前很容易做到：但事情是我不想在灰色区域有一个坚实的元素(参见JSFiddle – http://jsfiddle.net/aUdLr/2/) div{ width: 100px; height: 100px; background-color: red; border-radius: 10 如何在 CSS3中创建以下形状,而不使用像“：before”这样的伪类？

我之前很容易做到：但事情是我不想在灰色区域有一个坚实的元素(参见Jsfiddle – http://jsfiddle.net/aUdLr/2/)

div{    wIDth: 100px;    height: 100px;    background-color: red;    border-radius: 100%;    position: relative;}div:before{    content: "";    wIDth: 100%;    height: 110%;    background: gray;    position: absolute;    left: 5px;    top: -5%;    border-radius: 100%;}

解决方法 您可以使用边框宽度：

div{    wIDth: 100px;    height: 100px;    border-radius: 100%;    border-wIDth: 0;    border-left:solID 10px red;}

科学上不准确的例子：http://jsfiddle.net/aUdLr/4/

请记住,外形不是一个完美的圆形,因为边框被添加到宽度.您可以通过减小宽度或使用Box-sizing: Border-box进行补偿.

总结

以上是内存溢出为你收集整理的html – CSS3 Moon Eclipse形状全部内容，希望文章能够帮你解决html – CSS3 Moon Eclipse形状所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。