圆角的设计

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

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

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


<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张图片

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

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


<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">题目《    》div>
    <div class="content">
        <div>    级联样式表简称CSS,通常又称为“风格样式表”,它是用来进行网页风格设计的。div>
    div>
div>
body>
html>

通过设置背景来设计圆角:
圆角的设计_第2张图片

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

你可能感兴趣的:(DIV+CSS)