HTML5第六课时，盒子弧度

来源：互联网发布：知巳手机编辑：程序博客网时间：2024/05/20 10:23
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>盒子弧度</title>    <style>        #divmao{            width: 300px;            height: 200px;            margin: 0 auto;            background-color: #585858;            border-radius: 50px 0 50px 0;            background-image: url("../../image/mao.jpg");            background-size: 300px 200px;            background-repeat: no-repeat;            /*从左上角开始，顺时针转，调整角度。                border-radius:;四角的角度为直径一半的时候，就是圆形，大于这个值仍旧是圆，                盒子的长宽需要一致，否则不能变成圆*/        }        #div1{            width: 300px;            height: 300px;            background-color: #585858;            overflow: hidden;/*div2中加了margin-top会让两个div都向下移动，                                加上overflow就可以解决这个问题。*/            margin: 0 auto;            margin-top: 50px;            border-radius: 150px;        }        #div2{            width: 150px;            height: 150px;            background-color: #f2ad0a;            margin: 0 auto;            margin-top: 75px;            border-radius: 75px;        }    </style></head><body><div id="divmao"></div><div id="div1">    <div id="div2"></div></div></body></html>
0 0