温馨提示×

css的boxshadow怎么使用

小亿
103
2023-07-07 22:40:49
栏目: 编程语言

CSS的box-shadow属性用于向元素添加阴影效果。它可以接受多个值,用逗号分隔。下面是使用box-shadow属性的语法:

box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow:水平方向上的阴影偏移量,可正可负。

  • v-shadow:垂直方向上的阴影偏移量,可正可负。

  • blur:可选,模糊半径。

  • spread:可选,阴影的尺寸。

  • color:可选,阴影的颜色。

  • inset:可选,如果设置为"inset",则阴影将被绘制在元素内部。

以下是一些示例:

.box {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这个示例将在元素的右下角添加一个2像素的阴影,阴影颜色为半透明的黑色。

.box {
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}

这个示例将在元素周围添加一个10像素的模糊阴影,阴影颜色为半透明的黑色。

.box {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

这个示例将在元素内部添加一个10像素的阴影,阴影颜色为半透明的黑色。

你可以根据需要调整这些值来创建不同的阴影效果。

0