box shadow 立体感的阴影
时间: 2023-11-18 07:47:43 浏览: 48
box-shadow属性可以给元素添加立体感的阴影效果。阴影效果由四个属性组成:水平阴影位置、垂直阴影位置、模糊距离和阴影颜色。通过调整这些属性的值,可以实现不同的立体感效果。
例如,在CSS中使用box-shadow属性可以添加一个立体感的阴影效果:
```
#div1{
width:100px;
height:100px;
background:green;
box-shadow:0 10px 5px #000;
}
```
这个例子中,阴影的水平位置为0px,垂直位置为10px,模糊距离为5px,颜色为黑色。通过调整这些值,可以实现不同的立体感效果。
在Flutter中,可以使用BoxDecoration的boxShadow属性来实现类似的效果:
```
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
offset: Offset(10, 20),
blurRadius: 45.0,
spreadRadius: 0.0,
),
],
),
)
```
这个例子中,阴影的颜色为黑色的50%透明度,水平位置为10,垂直位置为20,模糊距离为45.0,膨胀量为0.0。调整这些值可以实现不同的立体感效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)