更新时间:2021-08-10 来源:黑马程序员 浏览量:
CSS3语法:
border-radius:length;
1.用CSS3换圆角矩形
用CSS3换圆角矩形技巧:矩形就只用高度的一半就好了,length=height/2。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用CSS画圆</title>
<style>
div{
background-color: #000;
height: 100px;
width: 300px;
/* length具体尺寸*/
border-radius: 20px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
效果:
2.用CSS3画圆
使用CSS3画圆的技巧:让一个正方形变成圆形,使 length=正方形边长/2。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用CSS画圆</title>
<style>
div{
background-color: #000;
height: 200px;
width: 200px;
/* length为正方形边长的的一般 */
border-radius: 50%;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
效果:
猜你喜欢: