【uniapp开发】如何给边框添加阴影效果
css的box-shadow是⽤来添加边框阴影效果的。
属性值详解：
1、inset
可选值，默认阴影在盒⼦外
使⽤inset后，阴影在盒⼦内，即使指定边框或者透明边框，阴影依然存在。
2、
这是头两个值，⽤来设置阴影偏移量。offset-x为设置阴影的⽔平位移，假如是负值，那么阴影在边框的左侧；offset-y设置阴影的垂直位移，假如是负值，那么阴影位于边框顶部。这个⽤数学中的数轴来理解应该是可以的，如下图：
css数轴
我们的⽔平原点是以边框的左上⾓为起始点，x为⽔平位移，Y为垂直位移。
3、
指定模糊半径，不允许负值，假如设置为0，则阴影不模糊，否则设置越⼤的值，边框阴影就越模糊。
4、
指定阴影拓展，假如设置为0，不拓展，正值阴影扩⼤，负值缩⼩。
demo：
（1）输⼊框内阴影
.shadow （
-moz-box-shadow: inset 0 0 10px #CCC;
-webkit-box-shadow: inset 0 0 10px #CCC;
box-shadow: inset 0 0 10px #CCC;
）
（2）简单效果
.one （
-moz-box-shadow:5px 5px;
-webkit-box-shadow:5px 5px;
box-shadow:5px 5px;
）
（3）虚阴影效果
.two （
-moz-box-shadow:2px 2px 10px #06c;box shadow怎么设置
-webkit-box-shadow:2px 2px 10px #06c;
box-shadow:2px 2px 10px #06c;
）
（4）渐变阴影效果
.three （
-moz-box-shadow:0 0 10px #06c;
-webkit-box-shadow:0 0 10px #06c;
box-shadow:0 0 10px #06c;
）
（5）带光晕效果
.four （
-moz-box-shadow:0 0 10px 10px #06c;
-webkit-box-shadow:0 0 10px 10px #06c;
box-shadow:0 0 10px 10px #06c;
）
（6）内阴影效果
.five （
-moz-box-shadow:inset 5px 5px 10px #06c;
-webkit-box-shadow: inset 5px 5px 10px #06c;
box-shadow: inset 5px 5px 10px #06c;
）
（7）彩⾊阴影
.six （
-moz-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;    -webkit-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,                                  4px 4px 12px 12px green;    box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,                                  4px 4px 12px 12px green;）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。