css 边框阴影
时间: 2024-10-14 19:01:41 浏览: 69
CSS边框阴影(border-shadow)是用来添加阴影效果到元素边框的一种属性,它可以模拟立体感,增加元素的视觉深度。边框阴影通常由四个部分组成:水平偏移、垂直偏移、模糊半径和扩散半径,每个部分都可以有颜色和轮廓。
基本语法如下:
```css
element {
border-radius: <值>; /* 可选圆角 */
border-width: <值>;
border-style: <值>; /* solid, dashed等 */
box-shadow: h-offset v-offset blur spread color inset; /* 其中inset可以是可选的 */
}
```
例如:
```css
.box {
border: 2px solid #ccc;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 水平偏移2px, 垂直偏移2px, 阴影模糊度4px, 阴影扩散2px, 颜色为灰色(透明度为50%) */
}
```
`inset`关键字可以将阴影置于元素内部,使其看起来像是浮雕的效果。
阅读全文