How to add shadow effect to border in uniapp development
image.png
<view style="width: 100px; height: 100px; margin: 50px;
-moz-box-shadow:2px 2px 10px #06c; -webkit-box-shadow:2px 2px 10px #06c; box-shadow:2px 2px 10px #06c; ">
测试边框阴影
</view>
CSS box-shadow is used to add border shadow effects.
Detailed explanation of attribute values:
1. Inset is an optional value. By default, the shadow is outside the box. After using inset, the shadow is inside the box. Even if a border or transparent border is specified, the shadow still exists.
2. These are the first two values, used to set the shadow offset. offset-x sets the horizontal displacement of the shadow. If it is a negative value, the shadow is on the left side of the border; offset-y sets the vertical displacement of the shadow. If it is a negative value, the shadow is on the top of the border. It should be possible to understand this using the number axis in mathematics, as shown below:
css number axis
Our horizontal origin is the upper left corner of the border as the starting point, x is the horizontal displacement, and Y is the vertical displacement.
3. Specify the blur radius. Negative values are not allowed. If it is set to 0, the shadow will not be blurred. Otherwise, the larger the value, the blurr the border shadow will be.
4. Specify shadow expansion. If set to 0, there will be no expansion. Positive values will expand the shadow and negative values will reduce it.
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; ）
...