box-shadow分别设置上阴影,下阴影,左阴影,右阴影
时间: 2023-11-30 16:36:14 浏览: 26
可以分别使用以下代码来设置上阴影、下阴影、左阴影、右阴影:
上阴影:box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.5);
说明:水平偏移量为0,垂直偏移量为-5px(向上偏移),模糊半径为5px,阴影颜色为黑色,透明度为0.5。
下阴影:box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
说明:水平偏移量为0,垂直偏移量为5px(向下偏移),模糊半径为5px,阴影颜色为黑色,透明度为0.5。
左阴影:box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.5);
说明:水平偏移量为-5px(向左偏移),垂直偏移量为0,模糊半径为5px,阴影颜色为黑色,透明度为0.5。
右阴影:box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.5);
说明:水平偏移量为5px(向右偏移),垂直偏移量为0,模糊半径为5px,阴影颜色为黑色,透明度为0.5。
相关问题
box-shadow左右下的阴影
box-shadow属性用于在元素周围创建阴影效果。其中,水平阴影、垂直阴影和模糊距离是必需的参数,而阴影尺寸、阴影颜色和内外阴影是可选的参数。
要创建一个具有左右下阴影的box-shadow效果,可以使用以下代码[^1]:
```css
box-shadow: 2px 0px 2px black, -2px 0px 2px black;
```
这个代码将在元素的左侧和右侧分别创建一个2像素宽的阴影,阴影颜色为黑色。
css box-shadow 让左右上阴影消失,只有下阴影
你可以这样设置:
```css
box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.75);
```
其中,第一个值 `0px` 表示水平偏移量为 0,第二个值 `10px` 表示垂直偏移量为 10px,第三个值 `10px` 表示阴影的模糊半径为 10px,第四个值 `-10px` 表示阴影的扩散半径为 -10px(即内缩),最后一个值 `rgba(0, 0, 0, 0.75)` 表示阴影的颜色和透明度。
这样设置之后,阴影只会在下方出现,左右和上方都没有阴影。