更新時(shí)間:2021年08月10日15時(shí)06分 來(lái)源:傳智教育 瀏覽次數(shù):
CSS3語(yǔ)法:
border-radius:length;
1.用CSS3畫圓
使用CSS3畫圓的技巧:讓一個(gè)正方形變成圓形,使 length=正方形邊長(zhǎng)/2。
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用CSS畫圓</title>
<style>
div{
background-color: #000;
height: 200px;
width: 200px;
/* length為正方形邊長(zhǎng)的的一般 */
border-radius: 50%;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
效果:
2.用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>
效果:
猜你喜歡: