如何使用边框设计各种样式的盒子

于 2017-08-30 16:18:52 发布
阅读量722 收藏 1
点赞数
文章标签： border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IUH_VIC/article/details/77717990
版权
本文通过多个实例展示了如何利用 CSS 的 border-radius 属性来创建各种形状，包括但不限于圆形、半圆、椭圆等，并结合边框颜色和宽度实现更复杂的设计效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

border属性:color /style/ width /radius 
注意:
  • border-radius:50% 使用的百分比是相对的 :
    对于水平半径，此值为占边框方框宽度的百分比；对于垂直半径，此值为占边框方框高度的百分比
  • border-radius:50% / 50%  分别指的是 水平半径 / 竖直半径
  • border-radius: 100px 100px 0 0  相对应的分别是左上角/右上角/右下角/左下角 (也可以只设置两个值,代表的是对角)
  • 设置高于50% 的角度值 可以画出弯曲度比较大的 角
几个例子:
月牙:
.box4{
        width: 80px;
        height: 25px;
        background-color: transparent;
        border:4px solid red;
        border-width:0 0 20px 0;
        border-radius: 0 0 100% 0;
        float: left;
    }            //把content设置成透明  边框的角度>50 % 
半圆:
.box3{
            height: 100px;
            margin-top: 50px;
            border-radius: 100px 100px 0 0;
        }               //半圆的设置要使用直接的px值   因为百分比是相对的
1/4半圆:
.box4{
            border-radius: 200px 0 0 0;
        }               //一个角
椭圆:
box8{
            width: 200px;
            height: 100px;
            border-radius:50%;
        }             //百分比是相对于宽高的   椭圆的短轴和长轴
1/2椭圆:
.box9{
            width: 200px;
            height: 50px;
            border-radius:200px 200px 0 0/100px 100px 0 0;
        }                         //不可以只设置百分比   根据长短轴依次设置水平/竖直半径
圆环:
.box13{
            width: 50px;
            height: 50px;
            border:75px solid darkcyan;
            background-color:white;
            border-radius: 100px;
        }          //里面是空的
外圆内不圆:
.box14{
            width: 50px;
            height: 50px;
            border:75px solid darkcyan;
            background-color:white;
            border-radius:50px;
        }             //当border-radius > width.height 时 才会内圆 
梯形:
.box16{
            width: 20px;
            height: 20px;
            border-width: 90px;
            border-style:solid;
            border-color: skyblue gold darkred darkcyan;
        }     
彩色环:
.box17{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border-width: 50px;
            border-style:solid;
            border-color: skyblue gold deeppink darkcyan ;
            background-color: white;
        }             //分别设置颜色
八卦背景:
/*上下边框不动 左右边框为0 此时上下边框的角度会越来越大  左右越来越小 直到0   而宽度则由内容撑起*/
        .box20{
            width: 200px;
            height: 0;
            border:100px solid darkcyan;
            border-color: orange black black orange;
            border-width: 100px 0;
            border-radius: 50%;
        }
        /*上半部分是上边框  下半部分是内容*/
        .box21{
            width: 200px;
            height: 100px;
            border-radius: 100px;
            background-color: darkcyan;
            /*设置上边框的宽度*/
            border:0px solid orange;
            border-width:  100px 0 0 0;
        }
八卦图:
.box22{
            width: 200px;
            height: 0;
            border:100px solid darkcyan;
            border-color: white black black white;
            border-width: 100px 0;
            border-radius: 50%;
            position: relative;
        }
        .box22::before{                                                                         //内部再设置两个圆 
            content: "";
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: white;
            border: 40px solid black;
            border-radius: 50%;
            bottom:-50px;
        }
        .box22::after{
            content: "";
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: black;
            border: 40px solid white;
            border-radius: 50%;
            bottom:-50px;
            left: 0;
        }
聊天框:
.box26{
            width: 200px;
            height: 120px;
            margin-top: 40px;
            background-color: darkred;
            position: relative;
        }
        .box26::after{
            content: "";
            width: 20px;
            height: 20px;
            background-color: white;
            position: absolute;
            right: -20px;
            top: 10px;
            border:0px solid darkred;
            border-width: 0 0 20px 0;
            border-radius:  0 0 100% 0;                //一个向上翘起的角
        }
全部的html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角半径</title>
    <style>
       body{
           height: 1500px;
       }
        div{
            width: 200px;
            height: 200px;
            float: left;
            background-color: lightgrey;
            margin-left: 30px;
            margin-top: 10px;
            text-align: center;
            font-size:19px;
        }
        .box1{
           border-radius: 50%;
        }
        .box2{
           border-radius: 50% 50% 0 0;
        }
        .box3{
            height: 100px;
            margin-top: 50px;
            border-radius: 100px 100px 0 0;
        }
        .box4{
            border-radius: 200px 0 0 0;
        }
        .box5{
            border-radius: 200px 0 200px 0;
            margin-left: 60px;
            width: 100px;
            height: 200px;
        }
        .box6{
            width: 200px;
            height: 100px;
            border-radius: 0 200px 0 200px;
        }
        .box7{
            border-radius: 50%;
        }
        .box7 span{
            display: block;
            width:50px;
            height: 50px;
            margin: 75px;
            background-color:white;
            border-radius: 50%;
        }
        .box8{
            width: 200px;
            height: 100px;
            border-radius:50%;
        }
        .box9{
            width: 200px;
            height: 50px;
            border-radius:200px 200px 0 0/100px 100px 0 0;
        }
        .box10{
            width: 100px;
            height: 50px;
            border-radius: 400px 0 0 0/200px 0 0 0;
        }
        .box11{
            width: 50px;
            height: 200px;
            border-radius: 100px 0 0 100px /200px 0 0 200px;
        }
        .box12{
            border-radius: 50%;
            position: relative;
        }
        span#left{
          width: 100px;
          height: 100px;
          background-color:white;
          border-radius: 50%;
          display: block;
          position: absolute;
          left: 0;
          top: 50px;
        }
        span#right{
           display: block;
           width: 100px;
           height: 100px;
           background-color:black;
           position: absolute;
           bottom: 50px;
           right: 0;
           border-radius:50%;
        }
        .box13{
            width: 50px;
            height: 50px;
            border:75px solid darkcyan;
            background-color:white;
            border-radius: 100px;
        }
        .box14{
            width: 50px;
            height: 50px;
            border:75px solid darkcyan;
            background-color:white;
            border-radius:50px;
        }
        .box15{
            width: 50px;
            height: 50px;
            border:75px solid darkcyan;
            background-color: white;
            border-radius: 100px 0;
        }
        .box16{
            width: 20px;
            height: 20px;
            border-width: 90px;
            border-style:solid;
            border-color: skyblue gold darkred darkcyan;
        }
        .box17{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border-width: 50px;
            border-style:solid;
            border-color: skyblue gold deeppink darkcyan ;
            background-color: white;
        }
        .box18{
            width: 0;
            height:0;
            border-width: 100px;
            border-style: solid;
            border-color: darkcyan  transparent  darkcyan darkcyan;
            border-radius: 50%;
            background-color:white;
        }
        .box19{
            width: 0px;
            height: 0px;
            border: 100px solid darkcyan;
            border-radius: 50% 0 50% 50%/50% 0 50% 50%;
            background-color: white;
            border-color: darkcyan darkcyan orange orange;
        }
        /*上下边框不动 左右边框为0  宽度由内容撑起*/
        .box20{
            width: 200px;
            height: 0;
            border:100px solid darkcyan;
            border-color: orange black black orange;
            border-width: 100px 0;
            border-radius: 50%;
        }
        /*上半部分是上边框  下半部分是内容*/
        .box21{
            width: 200px;
            height: 100px;
            border-radius: 100px;
            background-color: darkcyan;
            /*设置上边框的宽度*/
            border:0px solid orange;
            border-width:  100px 0 0 0;
        }
        .box22{
            width: 200px;
            height: 0;
            border:100px solid darkcyan;
            border-color: white black black white;
            border-width: 100px 0;
            border-radius: 50%;
            position: relative;
        }
        .box22::before{
            content: "";
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: white;
            border: 40px solid black;
            border-radius: 50%;
            bottom:-50px;
        }
        .box22::after{
            content: "";
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: black;
            border: 40px solid white;
            border-radius: 50%;
            bottom:-50px;
            left: 0;
        }
        .box23{
            width: 200px;
            height: 200px;
            background-color:darkred;
            border:0px solid black;
            border-radius:0 0 50% 0;
            position: relative;
        }
        .box23::after{
            content: "";
            width: 75px;
            height: 75px;
            position: absolute;
            right: 0;
            top: 50px;
            background-color: white;
            border-radius: 0 0 40% 0;
        }
        .box24{
            width: 200px;
            height: 100px;
            background-color: darkred;
            margin-top: 50px;
            position: relative;
        }
        .box24::before{
            content: "";
            width: 0px;
            height: 0px;
            border:10px solid darkred;
            border-color:transparent  darkred transparent transparent;
            position: absolute;
            left: -20px;
            top: 20px;
        }
        .box25{
            width: 200px;
            height: 120px;
            background-color:darkred;
            margin-top: 40px;
            border-radius:100px;
            position: relative;
        }
        .box25::after{
            content: "";
            width: 100px;
            height: 40px;
            background-color: white;
            position: absolute;
            top: 40px;
            left: 80px;
            border-radius: 0 50% 50% 0;
        }
        .box26{
            width: 200px;
            height: 120px;
            margin-top: 40px;
            background-color: darkred;
            position: relative;
        }
        .box26::after{
            content: "";
            width: 20px;
            height: 20px;
            background-color: white;
            position: absolute;
            right: -20px;
            top: 10px;
            border:0px solid darkred;
            border-width: 0 0 20px 0;
            border-radius:  0 0 100% 0;
        }
        .box27{
            width: 200px;
            height: 100px;
            border:1px solid white;
            border-radius: 50%;
        }
        .box28{
            width: 200px;
            height: 200px;
            border:1px solid white;
            border-radius: 0 50% 50% 50%;
        }
    </style>
</head>
<body>
    <div class="box1">圆</div>
    <div class="box2">拱形</div>
    <div class="box3">半圆</div>
    <div class="box4">四分之一圆</div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"><span>环形</span></div>
    <div class="box8">椭圆</div>
    <div class="box9">1/2椭圆</div>
    <div class="box10">1/4椭圆</div>
    <div class="box11">竖1/2椭圆</div>
    <div class="box12">奥特曼<span id="left"></span><span id="right"></span></div>
    <div class="box13">圆环</div>
    <div class="box14">外圆内不圆</div>
    <div class="box15">两角圆</div>
    <div class="box16">梯形</div>
    <div class="box17">外圆环</div>
    <div class="box18">吃豆豆</div>
    <div class="box19">瓜子</div>
    <div class="box20">八卦背景1</div>
    <div class="box21">八卦背景2</div>
    <div class="box22"></div>
    <div class="box23"></div>
    <div class="box24"></div>
    <div class="box25"></div>
    <div class="box26"></div>
    <div class="box27"></div>
    <div class="box28"></div>
</body>

</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值