响应式web开发chapter1/dem04

庒

已于 2022-03-03 12:48:00 修改

阅读量337

点赞数

文章标签： CSS 圆环边框四边渐变前端设计样式布局

于 2022-02-24 16:33:17 首次发布

本文链接：https://blog.csdn.net/weixin_54042448/article/details/123115080

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS特殊边框效果</title>
    </head>
    <style>
        body {
            padding:0;
            background-color:#e0e9e4;
        }
        div {
            margin:20px;
            float:left;
        }
        /*圆环*/
        .border-radius {
            width:40px;
            height:40px;
            border:70px solid #93baff;
            border-radius:90px;
        }
        /*四边色不同*/
        .border-radius1 {
            width:0px;
            height:0px;
            border-width:90px;
            border-style:solid;
            border-color:#ff898e #93baff #66e095 #ffb151;
        }
    </style>
    <body>
        <div class="border-radius"></div>
        <div class="border-radius1"></div>
    </body>
</html>