Como adicionar efeito de sombra à borda no desenvolvimento uniapp
imagem.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 é usado para adicionar efeitos de sombra de borda.
Explicação detalhada dos valores dos atributos:
1. Inset é um valor opcional. Por padrão, a sombra fica fora da caixa. Depois de usar a inserção, a sombra fica dentro da caixa. Mesmo se uma borda ou borda transparente for especificada, a sombra ainda existirá.
2. Estes são os dois primeiros valores, usados para definir o deslocamento da sombra. offset-x define o deslocamento horizontal da sombra. Se for um valor negativo, a sombra estará no lado esquerdo da borda; offset-y definirá o deslocamento vertical da sombra. Se for um valor negativo, a sombra será no topo da fronteira. Deveria ser possível entender isso usando o eixo dos números em matemática, conforme mostrado abaixo:
eixo dos números css
Nossa origem horizontal é o canto superior esquerdo da borda como ponto inicial, x é o deslocamento horizontal e Y é o deslocamento vertical.
3. Especifique o raio do desfoque. Valores negativos não são permitidos. Se for definido como 0, a sombra não será desfocada. Caso contrário, quanto maior o valor, mais desfocada será a sombra da borda.
4. Especifique a expansão da sombra. Se definido como 0, não haverá expansão. Valores positivos expandirão a sombra e valores negativos a reduzirão.
demonstração:
（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; ）
...