HTML练习之路14(制作创意画框)

科技前沿 • 2025-03-19 14:27 • 阅读 38

大家好，我是讯享网，很高兴认识大家。

本次要完成如图效果的创意画框：

通过分析可知，整体框架为一个大盒子包裹着一个小盒子，并且为两个盒子设置class，方便书写CSS时区分：

<body> <div class="out"> <div class="in"></div> </div> </body>

讯享网

搭建完整体框架后预览是没有任何效果的，因为我们只给了两个容器，而没有给容器任何内容，为了便于后期维护，并且遵循内容与样式相分离的原则，我们将在CSS中为两个<div>标签添加样式；

由于需要添加的样式较少，所以本次我们采用内嵌式引入CSS样式，并且为了避免受到浏览器默认边距的影响，我们使用通配符将内外边距初始化：

讯享网<style> *{ padding: 0px; margin: 0px; } </style>

通过分析目标效果图，父盒子（框架中外层的<div>标签）的背景是红蓝两色的线性渐变，背景为素材提供的相框，相框外还设置了右下方的阴影效果，并且通过相框与线性渐变之间的白边可知还设置了内边距（内边距的具体数值需要通过调试得到）。

首先我们针对父盒子设置一个显示范围（设置宽高），然后设置边框是为了方便我们在书写代码时能实时的看到我们的设置范围是否合适：

width: 600px; height: 400px; border: 1px solid #000000;

接下来通过margin值复制的原则将父盒子居中显示：

讯享网margin: 20px auto;

然后我们为父盒子设置线性渐变，引入背景图片，并为外边框设置右下方的阴影，最后调试内边距，直到我们的相框与线性渐变背景之间形成一条明显的白边即可，我们的父边框样式设置就结束了：

background-image: linear-gradient(to right,#0781F3 50%,#EF4E51 50%); border-image: url( "../../Documents/muxishiye/zuqiukuang.jpg") 22%/50px/1px repeat; box-shadow: 7px 8px 1px 1px #7A7A7A; padding: 22px;

父边框演示如下：

接下来我们转战子边框的样式设置，通过分析，子边框主要是引入一张图片，并且为图片设置了透明度。

因为子边框是被父边框包裹的，所以我们子边框范围显示在父边框之内即可，所以我们将子边框的范围设置为100%即可：

讯享网width: 100%; height: 100%;

接下来我们引入图片，并将他设置为不平铺（no-repeat）并且水平和垂直居中：

background: url( "../../Documents/muxishiye/zuqiu.png") center center no-repeat;

最后，我们为图片设置透明，本次的作品就大功告成了：

讯享网opacity: 0.6;

实际演示效果如下：

完整.html源码+.css源码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创意画框</title>
	<style>
		*	{
				padding: 0px;
				margin: 0px;
			}
		
		.out{
				width: 600px;
				height: 400px;
				border: 1px solid #000000;
				margin: 20px auto;
				background-image: linear-gradient(to right,#0781F3 50%,#EF4E51 50%);
				border-image: url( "../../Documents/muxishiye/zuqiukuang.jpg") 22%/50px/1px repeat;
				box-shadow: 7px 8px 1px 1px #7A7A7A; 
				padding: 22px;
			}
		
		.in{
			width: 100%;
			height: 100%;
			background: url( "../../Documents/muxishiye/zuqiu.png") center center no-repeat;
			opacity: 0.6;
			}
	</style>
</head>

<body>
	<div class="out">
		<div class="in"></div>
	</div>
</body>
</html>

如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。

（：欢迎入群~）

HTML练习之路14(制作创意画框)

相关推荐