css不⽤伪类实现底部弧度效果的两种办法border-radius的⼋个值
有天需求需要写⼀个底部有弧度的盒⼦，长这样
⽹上都⼤多需要伪类元素:after
我在想怎么不⽤伪类就可以写出来
第⼀个笨⽅法
<style>
.box{width:800px;height:400px;margin:0auto;position: relative;margin-top:200px;overflow: hidden;}
borderbox
.box1{ width:5000px;height:5000px;overflow: hidden;  border-radius:50%;background: #ffffff;position: absolute;bottom:0px; left:-2100px;; background:c oral;}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div >
</div>
</div>
</div>
最终效果就是这样
还有⼀种就是使⽤border-radius的⼋个值
<!--  x轴上1右2下3左4/ y轴上5右6下7左8-->
<div >
⼋个值
</div>
<div >
⼋个值
</div>
结果是这样
需要⾃⼰调试
⼩⽩⼀个多多包涵

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。