【uniapp 开发】如何给边框添加阴影效果

2019-06-05 18:44:55 阅读：195 来源： 互联网

标签：box uniapp 2px 边框 06c 添加 10px shadow 阴影

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;
     -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;
）

标签：box,uniapp,2px,边框,06c,添加,10px,shadow,阴影
来源： https://www.cnblogs.com/neo-java/p/10981252.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【uniapp 开发】如何给边框添加阴影效果