CSS实战 - 奇Y技巧之box-shadow属性-优快云博客

本文链接：https://blog.youkuaiyun.com/jack_bob/article/details/120842892

本文详细介绍了CSS box-shadow属性的四个值使用方法，通过实例演示了如何为按钮添加阴影效果，并展示了其在交互中的动态变化。重点讲解了激活状态下的阴影调整和过渡效果。

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

参考1：博客
box-shadow属性四个值_css中的boxshadow属性详解

效果：
在这里插入图片描述

实例：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS实战 -按钮</title>
 
	<style type="text/css">
		html,body{
  /*box-sizing:border-box;*/
  margin:0;
  height:100%;
  /*background:#000000;*/
}

.button {  
  border-radius: 8px;
	display: inline-block;
	color: #eff6ec;
	text-decoration: none;
	cursor: pointer;
  border-radius: 8px;
	box-shadow: 0 8px 0 #004d2f, 0 10px 15px rgba(0,0,0,.35);
	transition: box-shadow 0.2s ease-in-out;
}

.button span {
  text-align: center;
  border-radius: 8px;
  display: inline-block;
  font-size: 15px;
  font-family: arial;
  background: #008752;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#008752, #007849);

  border-top: 1px solid rgba(255,255,255,.2);
  border-bottom: 1px solid rgba(0,0,0,.2);
  border-radius: 8 px;  transition: transform 0.2s ease-in-out;
 }
 .button:active {
   box-shadow: 0 8px 0 #004d2f, 0 7px 10px rgba(0,0,0,.25);
 }
 .button:active span {
   transform: translateY(4px);
}
.p{ font-size:12px; width:100px; height:40px; line-height:40px;}
</style>
</head>
<body>
  <div style="margin-top: 100px;margin-left: 100px;background: #a09a47;width: 300px;height: 300px;">
    <div class="button" style="width: 180px;height: 58px;line-height: 58px;">
      <span>发射炮弹</span>
    </div>
  </div>
</body>