css 菱形阴影 |文字透明度css

.diamond {
position: relative;
width: 100px;
height: 100px;
transform: rotate(45deg);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.diamond::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: 100%;
height: 100%;
transform: rotate(-45deg);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

上述代码中，元素的宽高都为100px，通过transform: rotate(45deg)使得正方形旋转45度成为菱形。box-shadow添加阴影效果，利用伪元素:before在菱形旁边添加另一层阴影效果，通过inset参数可以让阴影在内部，形成一个凸起的菱形。

使用CSS菱形阴影可以实现特别鲜明的视觉效果，在网页中通常应用于按钮、导航栏等元素。该效果还可以与CSS动画结合，做出更加生动的效果。

一些注意点：
1. 菱形的宽高需要一致，否则会出现倾斜问题；
2. 旋转角度需要精确，否则菱形的边角可能与父元素发生碰撞；
3. 菱形阴影可能会对网站性能造成影响，需要较慎重使用。