今天我们将学习如何使用 CSS 的 box-shadow 属性来制作漂亮的网站组件。在此过程中,我们将创建一个按钮,并获得使用此属性的实践经验。让我们开始吧。🎖️

目录

  • 为什么你应该使用 CSS box-shadow 属性
  • box-shadow 属性的语法
  • 如何使用 box-shadow 属性制作按钮
  • 其他资源
  • CSS box-shadow 属性中的 inset 是什么?

你也可以看这个 YouTube 视频教程来学习:

为什么你应该使用 CSS box-shadow 属性?

对小细节的关注将好的网站与外观精美的网站区分开来。如果你想将这些小细节添加到你的网站,你绝对应该将此属性与许多其他属性一起使用。

让我们举一些例子。👇

一个网站设计

请密切注意上图中的按钮组件。你会看到我们有一些阴影。☝

让我们进一步检查这些按钮:👇

没有 box-shadow 属性的按钮
有 box-shadow 属性的按钮

可以看出,后者看起来更具活力和趣味性,因为它更注重细节。这叫作投影效果。让我们看看如何在我们的代码中实现它。

项目设置

HTML

在 body 标签中写代码: 👇

<div class="box-1"> A Button </div>

CSS

清除你的浏览器默认设置:

*{
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   font-family: sans-serif;
}

现在,我们用下面的代码创建一个按钮:👇

.box-1{
   margin: 100px 0 0 100px;
   height: 80px;
   width: 200px;
   border: 2px solid black;
   border-radius: 8px;
   font-size: 40px;

   display: grid;
   place-content: center;
}

好啦,现在我们开始写代码!

box-shadow 属性的语法

box-shadow 属性的所有要素

这是 box-shadow 属性的语法:👇

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color ;

让我们更详细地看一下每个部分。

如何在 box-shadow 属性中使用 Offset-x

你将使用 offset-x 属性沿 X 轴向左和向右移动阴影。这是一个演示:👇

我们可以向左或向右移动阴影

在你的 CSS 中编写以下代码:👇

/* offset-x | offset-y | color */
.box-1{
   box-shadow: -50px 0px rgba(0,0,0,0.5);
}

/*Or, you can write*/

.box-1{
   box-shadow: 50px 0px rgba(0,0,0,0.5);
}

如何在 box-shadow 属性中使用 Offset-y

你将使用 offset-y 属性沿 Y 轴上下移动阴影,例如:👇

我们可以向上或向下移动阴影

请在你的 CSS 中写入以下内容:👇

/* offset-x | offset-y | color */
.box-1{
   box-shadow: 0px -50px rgba(0,0,0,0.5);
}

/*Or, you can write*/

.box-1{
   box-shadow: 0px -50px rgba(0,0,0,0.5);
}

如何结合 offset-x 和 offset-y

在你的 CSS 中写以下代码:👇

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

H这是按钮右侧和底部显示阴影的结果: 👇

如何在 box-shadow 属性中使用 blur-radius

blur-radius 属性会模糊按钮周围的颜色,就像这样:👇👇

代码如下:👇

/* offset-x | offset-y | blur-radius | color */

.box-1{
/* play around with 👇 this */
   box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

如何在 box-shadow 属性中使用 spread-radius

这个值在我们的按钮周围散布阴影,如下所示:👇

让我们使用以下 CSS 代码创建上面的效果:

/* offset-x | offset-y | blur-radius | spread-radius | color */

.box-1{
/*  play around with 👇 this */
   box-shadow: 0 0 0 50px rgba(0,0,0,0.5);
}

如何为按钮添加投影

让我们把上面学到的东西放在一起,为按钮添加投影效果:👇

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

效果如下:👇

其他资源

✨ 温馨提示✨

CSS box-shadow 属性中的 inset 是什么?

有一个名为 inset 的关键字,你可以将其与 box-shadow 属性一起使用。这会将阴影放在按钮内部,而不是将其散布在按钮外部。写这个 CSS 代码来试验一下:👇

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

效果如下:👇

总结

现在,你可以自信地使用 box-shadow 属性不仅添加投影,还可以更加关注项目的细节。

这是你读到最后的奖牌。 ❤️

非常欢迎你的建议和批评❤️

引用

原文:Learn the CSS Box-Shadow Property by Coding a Beautiful Button,作者:Joy Shaheb