css 箱阴影
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 箱阴影相关的知识，希望对你有一定的参考价值。
/*TOP RIGHT BACK SHADOW*/
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
/*ALL SIDES BACK SHADOW*/
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
/*ALL SIDE BACK SHADOW WITH BLUR*/
box-shadow: 0 0 10px 5px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px 5px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px 5px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px 5px rgba(0,0,0,0.6);
/*Top-Right Box Shadow*/
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
/*Top-Right Box Shadow with Blur effect*/
box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
/*CSS Box-Shadow:Inset (Inner Shadow)*/
box-shadow: inset 10px -10px 25px rgba(0,0,0,0.6);
-moz-box-shadow: inset 10px -10px 25px rgba(0,0,0,0.6);
-webkit-box-shadow: inset 10px -10px 25px rgba(0,0,0,0.6);
-o-box-shadow: inset 10px -10px 25px rgba(0,0,0,0.6);
/*CSS Shadow Right and Left Only*/
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
-moz-box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
-webkit-box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
-o-box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
/*CSS Shadow Top and Bottom*/
box-shadow:0px -10px 5px rgba(31, 73, 125, 0.8),0px 10px 5px rgba(31, 73, 125, 0.8);
-moz-box-shadow:0px -10px 5px rgba(31, 73, 125, 0.8),0px 10px 5px rgba(31, 73, 125, 0.8);
-webkit-box-shadow:0px -10px 5px rgba(31, 73, 125, 0.8),0px 10px 5px rgba(31, 73, 125, 0.8);
-o-box-shadow:0px -10px 5px rgba(31, 73, 125, 0.8),0px 10px 5px rgba(31, 73, 125, 0.8);
/*RESOURCES*/
/*http://www.corelangs.com/css/box/shadow.html*/
以上是关于css 箱阴影的主要内容，如果未能解决你的问题，请参考以下文章