您现在的位置是: 首页 » 网页代码 » css如何设置圆角边框?
网页代码

css如何设置圆角边框?

网站优化小编十一月 10, 2019 5人已围观

圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,下面我们来看一下如何使用css设置圆角边框。

网站运营中栏目排名优化技巧

圆角边框(border-radius)的基本用法:

圆角边框的最基本用法就是设置四个相同弧度的圆角

boder-top-left-radius:30px;      //左上角
boder-top-right-radius:30px;   //右上角
boder-bottom-left-radius:30px;  //右下角
boder-bottom-right-radius:30px; //左下角

如果这四个弧度的圆角相同,可以写成:

border-radius:30px;

css设置圆角边框:

css部分:

.div1{
            margin:0 auto;
            background: darkcyan;
            width:200px;
            height:200px;
            border:2px solid darkslategray;
            border-radius:30px;
            text-align: center;
            line-height: 200px;
        }

html部分:

 <div class="div1">圆角边框</div>

效果如图:

网站运营中栏目排名优化技巧

设置不同弧度的圆角

例子:

css部分:

 #box4{
            width:500px;
            position: relative;
            margin:30px auto;
        }
        .div4,.div5,.div6,.div7{
            width:200px;
            height:200px;
            text-align: center;
            color:seagreen;
            font-size: 26px;
            line-height: 200px;
            background: yellowgreen;
            border:2px solid darkslategray;
            float:left;
            margin:20px;
        }
        .div4{border-top-left-radius: 40px;}
        .div5{border-top-right-radius: 20px;}
        .div6{border-bottom-left-radius: 30px;}
        .div7{border-bottom-right-radius: 10px;}

HTML部分:

<div id="box4">
        <div class="div4">左上角为圆角</div>
        <div class="div5">右上角为圆角</div>
        <div class="div6">右下角为圆角</div>
        <div class="div7">左下角为圆角</div>
    </div>

效果如图:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:195天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:2413 条
  • 文章评论:4 条
  • 微信公众号:扫描二维码,关注我们