前端学习1——＜div＞相关

原创于 2022-03-16 11:06:22 发布 · 383 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #css

本文介绍了如何使用CSS设置元素的边框圆角，通过`border-radius`属性实现不同方式的圆角效果。同时，展示了如何为元素设定背景色，如示例中将`.divcss`的背景色设为白色。这两项基本CSS技巧是前端开发中常用的操作。

1. 边框设置圆角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边框设置圆角</title>
		<style type="text/css">
			.box{
				/*设置四个角*/
				border-radius: 10px;
				/*第一个参数设置（上左、下右），第二个参数设置（上右、下右）*/
				border-radius: 10px 10px;
				/*四个参数分别代表上左、上右、下右、下左*/
				border-radius: 10px 20px 30px 40px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

2.设置背景色（html+css）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置背景色</title>
		<style type="text/css">
			.divcss{
				background:#FFFFFF;/*颜色自定,这里是白色*/
			}
		</style>
	</head>
	<body>
		<div class="divcss">白色</div>
	</body>
</html>