CSS中的盒子弧度 border-radius

来源:互联网 发布:安装python安装方法 编辑:程序博客网 时间:2024/06/03 07:18
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        #div1{            width: 300px;            height: 300px;            background-color: red;            overflow: hidden;/*为了不让图片整体下移,添加overflow*/            border-radius: 150px;        }        #div2{            width: 150px;            height: 150px;            background-color: yellow;            margin: 0 auto;            margin-top: 75px;/*若不添加overflow,则div1也下移75px*/            border-radius: 75px;        }    </style>    <title>盒子弧度</title></head><body><div id="div1">    <div id="div2">    </div></div></body></html>

运行结果:


原创粉丝点击