问

css - DIV上半部椭圆布局问题？

几杯茶轶事发布于 2022-11-04 08:50

这种布局

自己试了下border-top-left/right-radius:50%，

但是差别很大，有没有什么好的纯html+css方案推荐？

5 个回答

好吧，我试了一下，发现实现起来有点困难，题主我只能告诉你background-color:rgb(50,40,80);还有一个是rgb(238,238,238);

2022-11-12 01:43 回答

Victory学德语
border-radius是可以设置水平半径和垂直半径的，格式为水平/垂直比如
```
border-radius:20px/10px;
```
样子大概是这样

手机答的图片为手绘:->
2022-11-12 01:43 回答

手机用户美佛_885

position:relative;
toop:10rem;
height:4rem;

就能基本形似了；

更新答案：希望PO主不是伸手党；

<html>
    <style>
        .bg{
            background:blue;
            width:320px;
            height:100%;
            min-height:100%;
            max-height:100%;
            overflow:hidden;
            box-sizing: border-box;
            padding-top:5rem;
            position: relative;
            overflow:hidden;
        }
        .bg .content{
            display: block;
            padding:4rem 1rem 0;
            position: relative;
            z-index:2;
        }
        .bg .decoration{
            height:640px;
            width:640px;
            position: absolute;
            left:-160px;
            background:white;
            border-radius:50%;
            z-index:1;
            box-sizing: border-box;
        }
        .bg .decoration:before{
            display: block;
            content:"";
            margin:5px;
            height:626px;
            width:626px;
            border-radius:50%;
            border:2px dashed blue;
        }
    </style>
    <body>
        <p class="bg">
            <p class="decoration">

            </p>
            <p class="content">
                这里是内容
            </p>
        </p>
    </body>
</html>

2022-11-12 01:43 回答

噬灬魂鴒

    border-top-left-radius: 300px 50px;
    border-top-right-radius: 300px 50px;

//設置兩個值可以達到橢圓圓角的效果

2022-11-12 01:43 回答

http://codepen.io/exdestroyer/pen/JXOVzL

2022-11-12 01:43 回答

jinshiyuan1123

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签