3d按钮练习

最新推荐文章于 2022-11-17 14:46:54 发布

梅志贤

最新推荐文章于 2022-11-17 14:46:54 发布

阅读量115

点赞数 1

本文链接：https://blog.csdn.net/weixin_44389021/article/details/87983150

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>按钮练习</title>
	<style type="text/css">

	.box{
		width: 400px;
		text-align: center;
		
		height: 200px;
		background: #ccf;
		margin:100px auto;
		/* border-radius: 水平半径/垂直半径 */
		/* border-radius: 50%; */
		border-radius: 200px/100px;
		-webkit-border-radius:50%;
		/* box-shadow: 水平阴影 垂直阴影 模糊距离  阴影尺寸 颜色 内外阴影 */
		box-shadow: 0  -15px  15px  #88f inset,
		10px -15px 15px #44f inset,
		-10px -15px 15px #fff inset,
		0 15px #88f,
		-35px 40px 5px rgba(0,0,0,0.3);

      font:55px "微软雅黑";
      transition:all 0.3s ease-in 0s;

	}
	.content{
		color:#88f;
		line-height: 150px;
		transform:scale(1,0.8); /*  让文字扁一点 */
		/* text-shadow: 水平阴影 垂直阴影 模糊距离 颜色; */
		text-shadow:3px -3px 1px #44f,-3px 3px 1px #fff;
	}
	.txt{
		text-align: center;
	}
	.box:hover{
			box-shadow:
			 0  -15px  15px  #88f inset,
			10px -15px 15px #44f inset,
			-10px -15px 15px #fff inset,
			0 3px #88f,
			-10px 15px 5px rgba(0,0,0,0.3);
			margin-top:150px;
	}
	</style>
</head>
<body>
	<div class="box">
		 <div class="content">山东蓝翔</div> 
	</div>
	<div class="txt">学习挖掘机哪家强，中国山东 找蓝翔 </div>
</body>
</html>```

梅志贤

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3d按钮练习

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;按钮练习&lt;/title&gt; &lt;style type="text/css"&gt; .box{ width: 4
复制链接

扫一扫