详解：22 border-radius
核心：记住，如果只写一个的话，代表四个角都变化 记住：如果写两个的话。代表左上角与右下角一样，右上角与左下角一样 记住：如果三个值的话，代表左上角 右上角 左下角 如果四个值的话，代表顺时针，从左上角----右上角—右下角—左下角 记住：border-top-left-radius: 80px 40px;这样的，都是上下然后左右的写的时候勒，80px是水平，然后是40px垂直
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
#container div
{
width: 100px;
height: 100px;
border: 3px solid red;
background-color: red;
margin: 10px;
}
.box1
{
border-radius: none;
}
.box2
{
border-radius: 10px;
}
.box3
{
border-radius: 20px 40px;/*如果两个的话。是左上角---右下角,然后是右上角----左下角*/
}``
.box4
{
border-radius: 10px 20px 30px;/*左上角--然后是右上角---左下角，然后是右下角*/
}
.box5
{
border-radius: 10px 20px 30px 40px;/*顺时针把，从左上角开始把*/
}
.box6
{
border-top-left-radius: 80px 40px;/*先以上下开始然后第三个是左右把*/
}/*水平 垂直*/
</style>
</head>
<body>
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/04/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
