border-radius圆角

最新推荐文章于 2022-07-22 14:58:04 发布

原创最新推荐文章于 2022-07-22 14:58:04 发布 · 441 阅读

0 ·

CC 4.0 BY-SA版权

响应式专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了CSS中使用不同参数设置div元素圆角边框的方法，包括但不限于宽度、高度、边框颜色等属性的应用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        div{width: 200px;height: 200px;border:1px solid green;margin:20px;}
        div:nth-child(1){
            width: 200px;
            height: 200px;
            border: 10px solid green;
            border-radius: 50px/20px;
        }
        div:nth-child(2){
            border-radius: 20px;
        }
        div:nth-child(3){
            border-radius: 20px 0;
        }
        div:nth-child(4){
            border-radius: 100px;
        }
        div:nth-child(5){
            border-radius: 50%;
        }
        div:nth-child(6){
            border-radius: 50% 0;
        }
        div:nth-child(7){
            border-radius: 100px 0;
        }
        div:nth-child(8){
            border-radius: 200px 0 0 0;
        }
        div:nth-child(9){
            border-radius: 100px 100px 0 0;
            height:100px;
        }
        div:nth-child(10){
            border-radius: 50px;
            height:100px;
        }
        div:nth-child(11){
            border-radius:50%;
            height:100px;
        }
    </style>
</head>
<body>
    <div></div><div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>