H5和CSS3简单画个盒子

最新推荐文章于 2025-04-09 21:42:56 发布

原创最新推荐文章于 2025-04-09 21:42:56 发布 · 885 阅读

2 ·

CC 4.0 BY-SA版权

大前端专栏收录该内容

38 篇文章

订阅专栏

本文通过实例演示了如何使用CSS进行盒子与圆形的设计，包括边框样式、背景图片适应、圆角效果等，适合初学者快速掌握CSS基本布局技巧。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>画个盒子</title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: deeppink;
				/*边框的样式   边框的宽度  边框的颜色*/
				border: double 5px yellow;
			}
			#box2{
				width: 500px;
				height: 400px;
				background-color:orange;
				background-image: url(img/PIC/2.jpg);
				/*x方向    y方向  设置背景图适应盒子*/
				background-size: 100% 100%;
			}
			#box3{
				width: 300px;
				height: 300px;
				border: solid 5px blue;
				background-image: url(img/PIC/hot.png);
				/*x方向    y方向  设置背景图适应盒子*/
				/*background-size: 100% 100%;*/
				/*加个-x 表示竖排列  加个-y表示横排列 */
				/*background-repeat-y: no-repeat;*/
				background-repeat-x: no-repeat;
			}
			#circle{
				width: 200px;
				height: 200px;
				background: greenyellow;
				/*圆角*/
				border-radius: 50%;
				border: solid 10px red;
			}
			#circle02{
				width: 200px;
				height: 200px;
				background: hotpink;
				/*左上角  右上角  右下角  左下角*/
				border-radius:4px 8px 16px 32px;
				border: solid 10px deepskyblue;
			}
			
			
		</style>
	</head>
	<body>
		<div id="box"></div>
		<br />
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="circle"></div>
		<div id="circle02"></div>
		
	</body>
</html>

效果如下：

box：