css实现跨浏览器的box-shadow盒阴影效果告别图片实现类似效果(2)

CSS的box-shadow属性可以在元素周围添加阴影。使用该属性可以实现各种效果，例如给按钮添加点击效果等。然而，不同浏览器对box-shadow的实现方式略有不同，这可能导致在某些浏览器中产生不一致的显示效果。

为了解决这个问题，我们可以使用带有私有前缀的box-shadow属性。私有前缀是浏览器厂商用于实验性属性的前缀，这些属性还没有被标准化，但它们可能在将来的版本中得到支持。下面是跨浏览器实现box-shadow的完整攻略：

1. 首先，我们需要添加一个通用的box-shadow：

box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

此代码将在元素右下角添加一个灰色的阴影。其中，4个值分别表示：水平偏移量、垂直偏移量、模糊半径和阴影颜色。

1. 为了使该效果在不同浏览器中都能正常显示，我们需要添加带有私有前缀的box-shadow属性：

-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

在这里，我们为WebKit和Mozilla浏览器添加了私有前缀的box-shadow属性。这样，该效果将在所有现代浏览器中正常显示。

接下来，我会举两个例子来说明如何使用box-shadow属性实现不同的效果：

示例一：创建按钮点击效果

对于按钮点击效果，我们可以使用box-shadow属性来模拟点击时的阴影效果：

button {
  box-shadow: 0 3px 0 #888;
}

button:active {
  box-shadow: none;
  transform: translateY(3px);
}

在这里，我们使用box-shadow将按钮底部添加一个灰色的阴影。当按钮被点击时，我们通过移除box-shadow来模拟点击效果，并将按钮向下移动3个像素。通过这个技巧，我们可以创建一个简单的按钮点击效果。

示例二：创建角标效果

对于角标效果，我们可以使用box-shadow和transform属性来创建一个带有圆角和阴影的方框：

div {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  background: #0072c6;
  box-shadow: 1px 3px 5px rgba(0,0,0,0.3);
  color: #fff;
  text-align: center;
  line-height: 80px;
}

div::before {
  content: "new";
  position: absolute;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  box-shadow: 1px 3px 5px rgba(0,0,0,0.3);
  background: #f00;
  color: #fff;
  transform: rotate(-45deg);
}

在这里，我们使用box-shadow属性为父元素添加阴影，并在父元素的:before伪元素上使用box-shadow属性添加阴影和圆角。我们还使用transform: rotate(-45deg)将伪元素旋转45度，使其成为一个角标。通过这个技巧，我们可以在元素的角上添加一个角标，以吸引用户的注意力。

总之，使用带有私有前缀的box-shadow属性可以帮助我们轻松地实现跨浏览器的box-shadow效果。无论是为了创建按钮点击效果还是为了创建角标效果，这个技巧都是非常有用的。