ユニアプリ開発で枠線に影効果を追加する方法
画像.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を使用します。
属性値の詳細な説明:
1. インセットは任意の値です。デフォルトでは、影はボックスの外側にあります。インセットを使用すると、影はボックスの内側になります。枠線または透明枠を指定しても、影は存在します。
2. これらは最初の 2 つの値で、シャドウ オフセットの設定に使用されます。offset-x は影の水平方向の変位を設定します。負の値の場合、影は境界線の左側にあります。offset-y は影の垂直方向の変位を設定します。負の値の場合、影は境界線の左側にあります。国境の頂上にある。以下に示すように、数学の数値軸を使用してこれを理解することができるはずです:
css 数値軸
水平方向の原点は境界線の左上隅を開始点とし、x は水平方向の変位、Y は垂直方向の変位です。
3. ぼかし半径を指定します。負の値は使用できません。0 に設定すると、影はぼかされません。それ以外の場合、値が大きいほど、境界線の影がぼやけます。
4. 影の拡張を指定します。0に設定すると拡張は行われません。正の値にすると影が拡張され、負の値にすると影が縮小します。
デモ：
（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; ）
...