HTML5网页设计基础——播放器图标

最新推荐文章于 2024-03-24 19:46:55 发布

无聊玩玩~

最新推荐文章于 2024-03-24 19:46:55 发布

阅读量6.1k

点赞数 13

文章标签： html5 css html 网页设计 css3

本文链接：https://blog.csdn.net/shengming_tutou/article/details/122775894

版权

案例：

参考代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.wai{
			margin: 50px auto;
			width: 300px;
			height: 253px;
			border:1px solid;
			background: linear-gradient(0deg,#99627b,#ccadce,#62426c);
		}
		.one{
			margin: 50px auto;
			width: 150px;
			height: 125px;
			background: linear-gradient(0deg,#492646,#945278);
			border-radius: 20px;
			padding-top: 25px;
			
		}
		.two{
			margin:auto;
			width: 100px;
			height: 65px;
			border: 10px solid #000;
			background: linear-gradient(350deg,#a85a67,#fab097);
			border-radius: 20px;
			padding-top:15px;
		}
		.three{
			margin:auto;
			width: 45px;
			height: 43px;
			border-radius:25px;
			background: white;
			padding-top:7px;
			padding-left:5px;
		}
		.four{
			margin: auto;
			width: 0;
			height: 0;
			border: 18px solid #000;
			border-left: 25px solid #000;
			border-right:none;
			border-top-color: transparent;
			border-bottom-color: transparent;
		
			
		}
	</style>
</head>

<body>
	<div class="wai">
		<div class="one">
			<div class="two">
				<div class="three">
					<div class="four">
				
				</div>
				</div>
		
			</div>
		</div>
	</div>
</body>
</html>

无聊玩玩~

关注

13
点赞
踩
59

收藏

觉得还不错? 一键收藏
2
评论
HTML5网页设计基础——播放器图标

案例：参考代码:<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title> <style> *{ margin: 0; padding: 0; } .wai{ margin: 50px auto; width: 300px; height: 253px; border:.
复制链接

扫一扫