码迷,mamicode.com
首页 > 其他好文 > 详细

border-radius实例2

时间:2019-12-03 14:16:18      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:code   absolute   hid   效果   latex   sla   实例   最大   背景   

一、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

border-radius实例2

标签:code   absolute   hid   效果   latex   sla   实例   最大   背景   

原文地址:https://www.cnblogs.com/tianma3798/p/11976390.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!