border-radius圆角

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

java_zhaoyanli

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

阅读量392

点赞数

分类专栏：响应式

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/51496917

版权

响应式专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!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>

java_zhaoyanli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
border-radius圆角

Document div{width: 200px;height: 200px;border:1px solid green;margin:20px;} div:nth-child(1){ width: 200px; height: 200px; border: 10px solid
复制链接

扫一扫

专栏目录