div CSS 前端页面开发:用border-radius画椭圆

前端开发 css3 知乎|前端设计htmlcss开发|htmlcss基础教程 web前端开发精品课

border-radius这个我们大伙都用。
书里在形状那章里讲了如何画椭圆。
我敲了一下代码。
对于border-radius的介绍,百度把。不少文章讲这个了。张大神的文章也讲了。
border-radius对应的值格式如下:xx xx xx xx / xx xx xx xx;
前面4个表示圆角的水平半径,后面四个表示圆角的垂直半径。依次顺序为:左上 右上 右下 左下。
当然可以简写,简写的规律总体跟margin一样的。
测试代码如下(为了表明意图,这里没有简写):
html 代码

<style>
    div {
        width: 200px;
        height: 100px;
        background: red;
        margin: 30px;
        float: left;
    }
    .div1 {
        width: 100px;
        height: 100px;
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    }
    .div2 {
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    }
    .div3 {
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    }
    .div4 {
        border-radius: 0 0 50% 50% / 0 0 100% 100%;
    }
    .div5 {
        border-radius: 100% 0 0 100% / 50% 0 0 50%;
    }
    .div6 {
        border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    }
    .div7 {
        border-radius: 100% 0 0 0 / 100% 0 0 0;
    }
    .div8 {
        border-radius: 0 100% 0 0 / 0 100% 0 0;
    }
    .div9 {
        border-radius: 0 0 100% 0 / 0 0 100% 0;
    }
    .div10 {
        border-radius: 0 0 0 100% / 0 0 0 100%;
    }
</style>
<div class=”div1″></div>
<div class=”div2″></div>
<div class=”div3″></div>
<div class=”div4″></div>
<div class=”div5″></div>
<div class=”div6″></div>
<div class=”div7″></div>
<div class=”div8″></div>
<div class=”div9″></div>
<div class=”div10″></div>

前端插件化开发模式|html5前端开发视频教程|前端开发 svg插件

» 本文来自:前端开发者 » 《div CSS 前端页面开发:用border-radius画椭圆》
» 本文链接地址:https://www.rokub.com/3844.html
» 您也可以订阅本站:https://www.rokub.com
赞(1)
64K

评论 抢沙发

评论前必须登录!