盒子的大小、轮廓阴影和圆角

最新推荐文章于 2025-06-17 10:13:37 发布

Massimo_ycw

最新推荐文章于 2025-06-17 10:13:37 发布

阅读量201

点赞数

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.youkuaiyun.com/Massimo__JAVA/article/details/127377122

版权

HTML 专栏收录该内容

12 篇文章

订阅专栏

本文详细解析了HTML/CSS中的盒子模型，探讨了内容区、内边距、边框和border-box概念，同时介绍了轮廓阴影和圆角技术，包括outline和box-shadow的使用，以及border-radius实现圆角的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、盒子的大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				padding: 10px;
				border: 10px red solid;
				/* 
				默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
				box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用)
				可选值:
				content-box
				默认值，宽度和高度用来设置内容区的大小
				border-box宽度和高度用来设置整个盒子可见框的大小
				width和height指的是内容区和内边距和边框的总大小 
				 */
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>

二、轮廓阴影和圆角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				/* 
				outline用来设置元素的轮廓线，用法和border一模一样
				轮廓和边框不同的点，就是轮廓不会影响到可见框的大小 
				 */
				
				/* 
				 box-shadow用来设置元素的阴影效果，阴影不会影响页面布局
				 第一个值:水平偏移量,设置阴影的水平位置正值向右移动,负值向左移动
				 第二个值:垂直偏移量,设置阴影的水平位置正值向下移动,负值向上移动
				 第三个值:阴影的模糊半径
				 第四个值:阴影的颜色
				 */
				box-shadow: 10px 10px 10px rgba(0,0,0,.3);

			}
			.box1:hover{
				outline: 10px red solid;
			}
			
			.box2{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				margin-top: 20px;
				/* 
				 border-radius:
				 用来设置圆角 ,圆角设置的圆的半径大小
				 
				 border-top-left-radius:
				 border-top-right-radius:
				 border-bottom-left-radius:
				 border-bottom-right-radius:
				 
				 border-top-left-radius:50px 100px; 
				 
				 border-radius可以分别指定四个角的圆角
				 四个值:左上  右上  右下  左下
				 三个值:左上  右上/左下  右下
				 两个值:左上/右下  右上/左下
				 border-radius: 20px / 40px; 
				 将元素设置为一个圆形
				 border-radius: 50%;
				*/
			   border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>