CSS HTML: 圆角边框

在编写网页设计时，圆角边框是一种十分常见的设计元素。在CSS和HTML的帮助下，实现一个圆角边框可以说是十分简单，但要使圆角边框能够适应不同的网页设计，还需要学习一些基本的技巧和方案。本文将详细介绍有关圆角边框的各种方法和技巧，为你的网页设计提供帮助。

一、基本的圆角边框

在HTML中，创建基本的圆角边框主要依靠CSS border-radius属性，该属性值设置四个圆角半径的大小，如下面代码的例子所示：

    <div style="border:2px solid #C0C0C0;border-radius:10px">This is an example</div>

在上述代码的例子中，我们设定了一个宽度为2px的实线边框，在此基础上，为该边框设置一个半径为10px的圆角效果。

此外，如果我们想要设置单独一个角的圆角效果，也可以通过如下代码实现：

    <div style="border:2px solid #C0C0C0;border-top-left-radius:10px;border-top-right-radius:20px">This is an example</div>

上述代码中，我们通过在border-top-left-radius和border-top-right-radius两个属性中分别设置两个角的半径大小，同时保持另外两个角的默认值，实现了单独角落的圆角效果。

二、更丰富的圆角边框

如果单一的圆角效果不能满足你的需求，你可以设定不同的边框颜色和样式，以及不同圆角的大小和位置，从而实现更为丰富多彩的边框效果。

下面的代码演示了一个更丰富的圆角边框效果：

    <div style="border:10px dotted yellowgreen;border-top-left-radius:50px;border-bottom-right-radius:30px;border-top:20px solid gray">This is an example</div>

这个例子中，我们设置了边框的样式为虚线，颜色为yellowgreen，宽度为10px，同时将左上角和右下角分别设置成了50px和30px的圆角，将顶部的边框宽度设置为20px，颜色为gray。

三、进一步优化圆角边框效果

为了让圆角边框更加适应不同的网页设计，我们还可以按照自己的需求进行更进一步的优化。下面几种优化方式可以让你更好的掌控圆角边框的效果。

1、使用CSS3动画效果

CSS3提供了animate属性，可以让边框的大小、颜色和形状实现流畅的过渡效果。

    /*设置过渡时间和效果*/
    <style>
        div{
            border:1px solid #CCC;
            border-radius:10px;/*设置当前边框为圆角*/
            -webkit-transition:all .5s ease-in-out 0s;/*设置过渡时间和效果*/
            -moz-transition:all .5s ease-in-out 0s;
            -o-transition:all .5s ease-in-out 0s;
            transition:all .5s ease-in-out 0s;
        }
        /*鼠标移入显示效果*/
        div:hover {
            border:1px solid #000;
            padding:20px;
            border-radius:40px;/*边框更加圆润*/
            box-shadow:#000 5px 5px 5px;/*增加投影效果*/
        }
    </style>
 
    /*图形实现*/
    <div>
        <p>content:</p> 
    </div>

2、使用边框图片

你可以通过设置边框的背景图片，实现各种奇特的效果。下面是一个生成波浪纹边框的例子：

    /*设置边框背景图片*/
    <style>
        div{
            background:url("bg.jpg") repeat-x center 35px;/*设置边框背景图片*/
            border:1px solid #CCC;
            -moz-border-image:url("bg.jpg") 27 27;
            -o-border-image:url("bg.jpg") 27 27;
            -webkit-border-image:url("bg.jpg") 27 27;
            border-image:url("bg.jpg") 27 27 fill;
            padding:30px;
            margin:30px;
        }
    </style>
 
    /*图形实现*/
    <div>
        <p>content:</p> 
    </div>

3、使用多重边框

通过设置多个边框，你可以让原本简单的圆角边框更具有立体感和深度感。

    /*设置多重边框*/
    <style>
        div {
            padding:20px;
            border:10px solid #CCC;
            background:#EEE;
            position:relative;
        }
        /*阴影效果*/
        div:after {
            content:"";
            position:absolute;
            z-index:-1;
            top:15px;
            left:15px;
            right:-15px;
            bottom:-15px;
            background-color:#333;
            -moz-box-shadow:0 0 15px #333;
            -webkit-box-shadow:0 0 15px #333;
            box-shadow:0 0 15px #333;
        }
        /*蓝色边框*/
        div:before {
            content:"";
            position:absolute;
            z-index:-2;
            top:10px;
            left:10px;
            right:-10px;
            bottom:-10px;
            background-color:blue;
            border:5px solid blue;
        }   
    </style>
 
    /*图形实现*/
    <div>
        <p>content:</p> 
    </div>

总结

通过CSS和HTML，我们可以创建出各类各样，效果醒目的圆角边框。但是，在实际的网页设计中，我们需要根据具体的设计要求，选择最为适合的圆角边框方案，达到更好的设计效果。