box-shadow - CSS

CSS属性box-shadow可以在元素周围添加一个或多个阴影效果。这个属性可以帮助程序员们创建出更美观的UI效果，增加用户体验。

语法

box-shadow: h-offset v-offset blur spread color inset;

属性值

• h-offset: X轴偏移量，可以为正负值
• v-offset: Y轴偏移量，可以为正负值
• blur: 阴影模糊程度，可以为0表示无模糊
• spread: 阴影尺寸，在模糊之后的尺寸扩展，可以为负值
• color: 阴影颜色，可以为颜色的名称（如red）或16进制表示（如#ff0000）
• inset: 可选参数，默认为外部阴影。如果设置为“inset”，则将阴影放在元素内部。

例子

以下CSS规则可以创建一个带有红色边框和阴影的Button：

button {
  background-color: #4CAF50; /* 绿色 */
  border: none;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 10px 10px 10px 0px #FF0000;
}

它的效果如下所示：

结论

box-shadow属性可帮助程序员创建出更好看的元素，这让网站和应用程序更容易使用和交互。现在是时候开始使用box-shadow来增加您网站的美观程度，并增强用户体验了！