mjz update

docs/10.文档/20.基础元素/90.边框阴影.md

@@ -5,10 +5,47 @@ permalink: /pages/basics/shadow
 article: false
 ---
 
-## 边框阴影
+## 边框
+在需要加边框的元素加上 class `solid`，加粗的就是 `solids`，然后还有单独四个不同的方向 `solid-top|...`
 
-::: details 点此查看页面源代码
-页面位置：`/pages/basics/shadow`
-```vue
+> css 代码
+```css
+.solid         四周
+.solid-top     上
+.solid-right   右
+.solid-bottom  
+.solid-left
 ```
-:::
+
+> 演示代码
+```vue
+<view class="padding solid">四周</view>
+<view class="padding solid-top">上</view>
+<view class="padding solid-right">右</view>
+<view class="padding solid-bottom">下</view>
+<view class="padding solid-left">左</view>
+```
+
+## 阴影
+
+在需要加阴影的元素加上 class `shadow` 即可
+
+> css 代码
+```css
+.shadow              默认阴影
+.shadow bg-blue|...  根据背景颜色而改变的阴影
+.shadow shadow-lg    长阴影
+.shadow-warp         翘边阴影
+```
+
+> 演示代码
+```vue
+<view class="padding-xl radius shadow bg-white">默认阴影</view>
+<view class="padding-xl radius shadow bg-blue">根据背景颜色而改变的阴影</view>
+<view class="padding-xl radius shadow shadow-lg bg-white">长阴影</view>
+<view class="padding-xl radius shadow shadow-lg bg-blue">长阴影</view>
+<view class="padding-xl radius shadow-warp bg-white">翘边阴影</view>
+<view class="padding-xl radius shadow-blur bg-red bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
+    <view>根据背景图而改变的阴影</view>
+</view>
+```