border-radius实例2

Posted 2020-11-24 tianma3798

一、border-radius 最大值100%

/* border-radius的最大值是100% */
.block {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    /* border-radius: 10px 10px 100% 100%; */
    border-radius: 10px 10px 200px 200px;
}

 

二、使用大圆拼凑更多边角效果示例：

注：微信抢红包页面背景效果可以使用这种方式

css代码：

        .block {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            border-radius: 10px;
            margin: 100px 0px 0px 100px;
            position: relative;
            overflow: hidden;
        }

        .blocktop {
            width: 200%;
            height: 200%;
            border: 1px solid blue;
            border-radius: 50%;
            margin-top: -150%;
            margin-left: -50%;
            background: blue;
            position: relative;
            overflow: hidden;
        }

        .blocktop .blockInner {
            width: 50%;
            height: 25%;
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
        }

        .blocktop img {
            width: 100%;
        }

 

html的结构：

<div class="block">
    <div class="blocktop">
        <div class="blockInner">
            <img src="http://beijing.gongjuji.net/imgdata/small/e6e7b778-0e0e-452f-80aa-f95f94690fab.jpg" alt="">
        </div>
    </div>
</div>

 

显示效果：

 

更多：

border-radius实例1

border-radius讲解2

border-radius讲解1