美文网首页
CSS3属性——border-radius

CSS3属性——border-radius

作者: 一書生 | 来源:发表于2018-12-07 12:53 被阅读4次

border-radius:圆角元素

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。
但是,如果你要在四个角上一一指定,可以使用以下规则:

四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
一个值: 四个圆角值相同
css3 圆角属性

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>边框属性</title>
        <style>
            div {
                border: 2px solid #a1a1a1;
                padding: 10px 40px;
                background: #dddddd;
                width: 300px;
                text-align: center;
                border-radius: 0px 50px 100px 180px;
            }
        </style>
    </head>

    <body>  ​
        <div>border-radius: 0px 50px 100px 180px; </div>    ​
    </body>
</html>

改变border-radius后的值:


border-radius:0px; border-radius:25px border-radius: 0px 50px 100px 180px;

相关文章

网友评论

      本文标题:CSS3属性——border-radius

      本文链接:https://www.haomeiwen.com/subject/rzlvcqtx.html