我正在尝试创建一个椭圆形和半圆形之间的混合.
可以在CSS中创建半圈:
.halfCircle{ height:45px; width:90px; border-radius: 90px 90px 0 0; -moz-border-radius: 90px 90px 0 0; -webkit-border-radius: 90px 90px 0 0; background:green; }
而椭圆可以这样做:
.oval { background-color: #80C5A0; width: 400px; height: 200px; margin: 100px auto 0px; border-radius: 200px / 100px; }
解决方法
我用一个可能的解决方案更新了你的演示:
div { background-color: #80C5A0; width: 400px; height: 100px; border-radius: 50% / 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
<div></div>
通过对边框半径使用基于百分比的单位,无论宽度和高度值如何,都应始终保持平滑的半椭圆.
有一些细微的变化,你将如何将半椭圆分割成一半垂直:
div { background-color: #80C5A0; width: 400px; height: 100px; border-radius: 100% / 50%; border-top-left-radius: 0; border-bottom-left-radius: 0; }
<div></div>
原文地址:https://www.jb51.cc/html/224462.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。