HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第四章课后习题(播放器图标)

本文链接：https://blog.csdn.net/yw1990128/article/details/129018382

该文章是一段HTML和CSS代码示例，展示了如何使用盒子模型和渐变效果创建一个播放器图标。代码中包括大背景、小背景、方框和播放按钮的样式定义，以及边框和内填充的技巧。

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

黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程

第四章：播放器图标-课后习题参考代码

。。。。。。。。

记得关注，收藏，评论哦，作者将持续更新。。。。

我自己做的效果如下：

主要知识点是盒子模型。。。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>播放器图标</title>
<style type="text/css">
.big_bg{
	width:500px;
	height:500px;
	background-image:linear-gradient(180deg,#62426c 20%,#d4b5d5 50%,#91576f 85%);
	padding-top:105px;
	box-sizing:border-box;
	margin:50px auto;
	}
.bg{
	width:300px;
	height:300px;
	margin:0px auto;
	background-image:linear-gradient(160deg,#945278 20%,#492646  50%);
	border-radius:20px;
	box-shadow:10px 10px 30px #2f0f2c;
	padding-top:55px;
	box-sizing:border-box;
	}
.box{
	width:240px;
	height:195px;
	background-image:linear-gradient(160deg,#fab097 20%,#a85a67  50%);
	margin:0 auto;
	border-radius:20px;
	border:26px solid #241826;
	padding-top:20px;
	box-sizing:border-box;
	}
.box_1{
	width:100px;
	height:100px;
	margin:0 auto;
	border-radius:50%;
	background:#FFF;
	padding:20px 0 0 10px;
	box-sizing:border-box;
	}
.play{
	width:0px;
	height:0px;
	margin:0 auto;
	border:30px solid #fff;
	border-left:30px solid #281a29;
	border-right:none;
	}	
</style>
</head>
<body>
<div class="big_bg">
	<div class="bg">
    	<div class="box">
        	<div class="box_1">
            	<div class="play"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>