<style>
div.first {
width: 200px;
height: 200px;
background-color: lightcoral;
border-radius: 20px 40px 60px 80px;
/* 左上 右上/左下 右下 */
border-radius: 20px 40px 60px;
/* 左上/右下 右上/左下 */
border-radius: 20px 40px;
/* border-radius: 10px 0 0 10px; */
border-bottom-left-radius: 50px;
}
.second {
width: 100px;
height: 100px;
background-color: pink;
/* 元素本身宽高的百分比 */
border-radius: 50%;
}
.third {
width: 100px;
height: 50px;
background-color: blue;
border-radius: 50px 50px 0 0;
}
.four {
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 0 0 100% 0;
}
</style>
</head>
<body>
<!--
border-radius:设置边框圆角
取值：
四个值：左上角 右上角 右下角 左下角
三个值：左上角 右上角/左下角 右下角
二个值：左上角/右下角 右上角/左下角
-->
<!--
设置圆：1.设置元素宽高比1:1,2.设置边框弧度时宽高的一半 （可以使用具体的数值或者百分比）
设置半圆：1.确定半圆=》确定元素的宽高比,2.确定哪二个角要设置，设置值为圆的半径，具体的值
设置四分之一圆：1.确定四分之一圆，元素的宽高比1:1,
2.确定哪个角要设置，设置值为圆的半径，元素的宽高（可以使用具体的数值或者百分比）
-->
<div class="first"></div>
<!-- 设置圆 -->
<div class="second"></div>
<!-- 设置二分之一圆---上半圆 -->
<div class="third"></div>
<br><br><br>
<!-- 设置四份之一圆---右下 -->
<div class="four"></div>
</body>
6862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
