圆角的设计

最新推荐文章于 2020-12-24 09:21:00 发布

小萝莉_Lolita

最新推荐文章于 2020-12-24 09:21:00 发布

阅读量804

点赞数

分类专栏： DIV+CSS 文章标签： css3 圆角

本文链接：https://blog.csdn.net/MDreamlove/article/details/77508655

版权

DIV+CSS 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

有三种方式可以添加圆角边框效果
1.使用图片
2.使用CSS3的border-radius属性
3.纯粹使用CSS边框颜色设置来达到圆角边框的效果

使用图片的一种方法是利用四个大小相同（三角的大小视圆角框大小而定）的三角图片作为背景，同时背景色设置为三角图片色即可实现圆角背景的效果，或者直接利用圆角图片作为背景……
下面着重介绍后两种方式的实现：

border-radius属性
下面使用border-radius属性来设置div标签边框，使其出现圆的效果，并通过设置z-index属性来设置标签的层次关系，从而实现奥运五环的效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>五环</title>
    <style>
        .circles{
            position: relative;
            float: left;
            margin:0;
        }
        .circles div{
            border-radius: 50px;
            height: 80px;
            width: 80px;
            border: 7px solid red;
            position: absolute;
            z-index: -1;
        }
        .circles .blue{
            border-color: blue;
            z-index: 0;
        }
        .circles .yellow{
            border-color: yellow;
            top: 50px;
            left: 50px;
            z-index: 1;
        }
        .circles .black{
            border-color: black;
            left: 100px;
            z-index: 0;
        }
        .circles .green{
            border-color: green;
            left: 150px;
            top: 50px;
            z-index: 1;
        }
        .circles .red{
            border-color: red;
            left: 200px;
            z-index: 0;
        }
        .circles .leftbig{
            border-right-color: transparent;
        }
        .circles .rightsmall{
            border-left-color: transparent;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
        .circles .blue.rightsmall{
            z-index: 2;
        }
        .circles .yellow.rightsmall{
            z-index: -1;
        }
        .circles .black.rightsmall{
            z-index: 2;
        }
        .circles .green.rightsmall{
            z-index: -1;
        }
        .circles .red.rightsmall{
            z-index: 0;
        }
    </style>
</head>
<body>
<div class="circles">
    <div class="blue leftbig"></div>
    <div class="blue rightsmall"></div>
    <div class="yellow leftbig"></div>
    <div class="yellow rightsmall"></div>
    <div class="black leftbig"></div>
    <div class="black rightsmall"></div>
    <div class="green leftbig"></div>
    <div class="green rightsmall"></div>
    <div class="red leftbig"></div>
    <div class="red rightsmall"></div>
</div>
</body>
</html>

奥运五环：

代码分析：
1.设计圆环的时候，必须使border-radius的值足够大，以使得div标签呈现圆形的效果，最好是比高度的一半还要大。
2.把div分为两类，一类是左边四分之三为透明颜色的（class属性含有rightsmall），一类是右边四分之一为透明颜色（class属性含有leftbig）。然后根据各个div标签设置它们的z-index属性（z-index的值需要从右到左逐个计算）。
3.定位问题：因为10个div的父节点的position属性为relative，所以这10个div标签，以它们的直接父节点的左上角为圆点进行定位。

设置div边框以及margin属性来设置圆角边框效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>通过设置背景设计圆角</title>
    <style>
        #frm{
            float: left;
        }
        #frm *{
            clear: both;
            text-align: center;
        }
        .top div{
            border: 1px solid #0f6;
            border-width: 0;
            border-top-width: 1px;
        }
        .top .l1{
            margin:0 5px;
            border-color: #f9fcfe;
        }
        .top .l2{
            margin:0 3px;
            border-color: #f8fbfe;
        }
        .top .l3{
            margin:0 2px;
            border-color: #f7fafe;
        }
        .top .l4{
            margin:0 1px;
            border-color: #f6f9fe;
        }
        .title{
            background-image: -moz-linear-gradient(top,#f4f7fc,#ebf0fa);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f4f7fc),color-stop(1,#ebf0fa));
        }
        .content{
            border: 1px solid #c5d5e4;
        }
        .content div{
            width: 200px;
            height: 80px;
            padding:20px;
            text-align: left;
        }
    </style>
</head>
<body>
<div id="frm">
    <div class="top">
        <div class="l1"></div>
        <div class="l2"></div>
        <div class="l3"></div>
        <div class="l4"></div>
    </div>
    <div class="title">题目《&nbsp;&nbsp;&nbsp;&nbsp;》</div>
    <div class="content">
        <div>&nbsp;&nbsp;&nbsp;&nbsp;级联样式表简称CSS，通常又称为“风格样式表”，它是用来进行网页风格设计的。</div>
    </div>
</div>
</body>
</html>

通过设置背景来设计圆角：
效果图

关键点：
class属性为top的div子节点用于绘画横向圆角效果，其内部含有4个div子节点，在CSS代码部分分别设置这4个div子节点的上边框（即线条，或者不设置边框，改为设置高度为1px并设置背景色），并设置这4个div子节点含有渐变的左右margin值即可。