---
title: 边框阴影
date: 2023-05-28 15:20:38
permalink: /pages/basics/shadow
article: false
---

## 边框
在需要加边框的元素加上 class 类名 `solid`，加粗的就是 `solids`，然后还有单独四个不同的方向 `solid-top|...`

> 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>
```