css不用伪类实现底部弧度效果的两种办法border-radius的八个值

最新推荐文章于 2024-05-27 14:48:10 发布

little_shallot

最新推荐文章于 2024-05-27 14:48:10 发布

阅读量936

点赞数 2

文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/little_shallot/article/details/106726891

版权

有天需求需要写一个底部有弧度的盒子，长这样

在这里插入图片描述
网上都大多需要伪类元素:after
我在想怎么不用伪类就可以写出来
第一个笨方法

   <style> 
    .box{width: 800px;height: 400px;margin: 0 auto;position: relative;margin-top: 200px;overflow: hidden;}
    .box1{ width: 5000px;height:5000px;overflow: hidden;  border-radius:50%;background: #ffffff;position: absolute;bottom: 0px; left: -2100px;; background:coral; }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <div style="width: 800px;height: 400px;background-image: url('./img/sssw1.jpg');background-size:100% 100%; ;position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);">

            </div>
        </div>
    </div>

最终效果就是这样
在这里插入图片描述
还有一种就是使用border-radius的八个值

  <!--  x轴 上1  右2  下3  左4/ y轴 上5 右6  下7   左8 -->

 <div style="width: 400px;height: 200px;background:red;margin: 0 auto; 
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;">
        八个值
   </div>
    <div style="width: 400px;height: 200px;background:red;margin: 0 auto;
      border-radius: 0 0 50% 50% / 0 0 20% 20%;">
        八个值
    </div>