在现代 Web 设计中，响应式设计已经成为了标配。为了兼容不同尺寸的屏幕和设备，我们需要设计出可以自适应的 UI 元素。其中一个经常用到的技巧就是边框虚影效果。这种效果可以让元素产生虚幻的浮起感，让页面更加有层次感和立体感。在本文中，我们将介绍如何实现这种效果。
实现思路
实现边框虚影效果主要有两个关键点：一是产生阴影，二是去掉边框。我们可以利用 CSS3 技术来实现这两个效果。在 CSS3 中，我们可以通过 box-shadow 属性来添加一个元素的阴影，而 border 属性则可以用来控制边框的样式。因此，我们可以在元素的 :before 和 :after 伪类中利用这两个属性来生成虚影。
实现步骤
下面我们来一步步实现边框虚影效果，以下以一个简单的按钮为例。
第一步：去掉原始边框
button {
border: none;
}我们首先需要去掉按钮的原始边框。
第二步：给按钮添加背景色
button {
background-color: #4285f4;
}为了使虚影更加明显，我们需要给按钮添加一个背景色。
第三步：添加阴影
// javascriptcn.com 代码示例
button:before {
content: "";
display: block;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
z-index: -1;
}我们给按钮添加 :before 伪类，并设置它的 position 为 absolute，使它与按钮脱离文档流。然后，我们利用 content 属性来添加一个空内容的子元素，让它覆盖整个按钮。接着，我们设置它的 box-shadow 属性来创建阴影效果，并设置它的 z-index 为负数，使它在按钮下方。
第四步：完善效果
// javascriptcn.com 代码示例
button {
position: relative;
padding: 10px;
color: #fff;
font-size: 16px;
text-align: center;
outline: none;
cursor: pointer;
}
button:hover {
background-color: #3367d6;
}
button:active {
background-color: #1d4bb9;
}
button:before {
content: "";
display: block;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
z-index: -1;
}最后，我们可以添加一些按钮的样式来完善效果。
示例代码
<button>Click me</button>
// javascriptcn.com 代码示例
button {
border: none;
background-color: #4285f4;
position: relative;
padding: 10px;
color: #fff;
font-size: 16px;
text-align: center;
outline: none;
cursor: pointer;
}
button:hover {
background-color: #3367d6;
}
button:active {
background-color: #1d4bb9;
}
button:before {
content: "";
display: block;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
z-index: -1;
}总结
通过以上步骤，我们可以轻松地实现边框虚影效果。当然，在实际的设计中，我们还可以通过调整 box-shadow、padding 等属性来达到更好的效果。这种技巧不仅可以应用于按钮，还可以用在其他元素中，例如图片、卡片等。它不仅可以让页面更加美观，还可以提高了用户体验，建议在实际项目中尝试应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f459e7d4982a6eb05b47e