如果我有一个带有以下设置的photoshop投影
混合模式 – rgb(0,0)/
不透明度 – 25％/
角度 – 135度/
距离4px /
点差 – 0％/
大小 – 4px
如何设置我的CSS3盒子阴影,以便它代表我的photoshop设计？
解决方法
此CSS类用于在一个规则中收集的各种Web浏览器,没有透明度(已知支持：Firefox 3.5,Chrome 5,Safari 5,Opera 10.6,IE 9)：
.shadow {
-moz-Box-shadow: 4px 4px 4px #000;
-webkit-Box-shadow: 4px 4px 4px #000;
Box-shadow: 4px 4px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Color='#000000');
}
…而这个CSS类具有透明度支持：
.shadow {
-webkit-Box-shadow:4px 4px 0px rgba(0,0.25);
-moz-Box-shadow:4px 4px 0px rgba(0,0.25);
Box-shadow:4px 4px 0px rgba(0,0.25);
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-o-transform:rotate(135deg);
transform:rotate(135deg);
}
