CSS3边框圆角效果 border-radius

border-radius是向元素添加圆角边框

------------------------------------------------------------------------------------

使用方法一：

border-radius:10px; /* 所有角都使用半径为10px的圆角 */

使用方法二：

border-radius:10px 8px 6px 4px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

以长宽为100的正方形为例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius</title>
    <style type="text/css">
        div.div1{
            height:100px;
            width:100px;
            background:green;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

页面运行如图:

在上面的基础上添加属性:border-radius:50px; /* 所有角都使用半径为50px的圆角 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius</title>
    <style type="text/css">
        div.div1{
            height:100px;
            width:100px;
            background:green;
            border-radius:50px; /* 所有角都使用半径为50px的圆角 */
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

注:要做成圆的形状,正方形的基础上,四个圆角值都设置为宽度或高度值的一半

运行结果如下:

上下左右实心圆实践:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius</title>
    <style type="text/css">
        div.div1{
            height:50px;
            width:100px;
            background:green;
            border-radius:50px 50px 0px 0px; /* 所有角都使用半径为50px的圆角 */
        }
        div.div2{
            height:100px;
            width:50px;
            background:green;
            border-radius:0px 50px 50px 0px; /* 所有角都使用半径为50px的圆角 */
        }
        div.div3{
            height:50px;
            width:100px;
            background:green;
            border-radius:0px 0px 50px 50px; /* 所有角都使用半径为50px的圆角 */
        }
        div.div4{
            height:100px;
            width:50px;
            background:green;
            border-radius:50px 0px 0px 50px; /* 所有角都使用半径为50px的圆角 */
        }
    </style>
</head>
<body>
    <div class="div1"></div>上半实心圆<br>
    <div class="div2"></div>右半实心圆<br>
    <div class="div3"></div>下半实心圆<br>
    <div class="div4"></div>左半实心圆
</body>
</html>

运行实例:

CSS3边框 圆角效果 border-radius

猜你喜欢

CSS3边框圆角效果 border-radius