border-radius属性
- border-radius属性的值通常为px单位，表示圆角的半径。
border-radius: 10px;
单独设置四个圆角
- border-radius属性可以单独设置四个圆角。
border-radius: 10px 20px 30px 40px;
- 也可以使用小属性。
属性 意义 border-top-left-radius 左上角 border-top-right-radius 右上角 border-bottom-left-radius 左下角 border-bottom-right-radius 右下角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
div {
width: 100px;
height: 100px;
border: 3px solid #000;
/* 依次是左上、右上、右下、左下 */
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<!-- 设置圆角 -->
<div></div>
</body>
</html>
百分比为单位
- border-radius属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
div {
width: 100px;
height: 200px;
border: 3px solid #000;
/* 上边和左边各取一半作为圆角 */
border-top-left-radius: 50%;
}
</style>
</head>
<body>
<!-- 设置圆角 -->
<div></div>
</body>
</html>
正圆形
- 正方形盒子如果设置的border-radius属性为50%，就是正圆形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
div {
width: 100px;
height: 100px;
border: 3px solid #000;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 设置圆角 -->
<div></div>
</body>
</html> 
6270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
