css边框阴影_CSS框阴影

最新推荐文章于 2025-05-17 15:48:03 发布

翻译最新推荐文章于 2025-05-17 15:48:03 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://thenewcode.com/227/CSS-box-shadow

文章标签：

#css #html #css3 #js #html5 #ViewUI

本文深入讲解了CSS中的box-shadow属性，介绍了其基本语法和五个关键值：水平偏移、垂直偏移、模糊、扩展和颜色。文章展示了如何利用box-shadow创建发光效果、模拟环境光效果以及实现压纹外观。同时，提到了box-shadow与CSS3变换和属性的结合使用，以及动画化box-shadow可能带来的浏览器性能问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css边框阴影

As text-shadow is to text, box-shadow is to most everything else. It even uses the same basic syntax, with five values:

正如text-shadow对文本一样， box-shadow对大多数其他内容也是如此。它甚至使用相同的基本语法，带有五个值：

box-shadow: horizontal offset vertical offset blur spread  color;

Combined with the various transforms and properties in CSS3,

box-shadow means that image processing in PhotoShop can be kept to a minimum, and CSS – which is far more easily modified and maintained, as well as very low in file size – can be used for most visual effects on pages.

box-shadow结合CSS3 box-shadow的各种变换和属性，意味着可以将PhotoShop中的图像处理保持在最低水平，并且可以使用CSS(它更易于修改和维护，并且文件尺寸非常小)以获得页面上的大多数视觉效果。

Remember that in HTML, everything is a box; even if you can’t see it, or if it is only implied. All images are boxes:

请记住， 在HTML中，所有内容都是一个盒子。 即使您看不到它，或者只是隐含的。 所有图像均为方框：

img#greek-temple {
	width: 400px; 
	height: 259px;
	border: 15px solid #ffd;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3); 
}

Setting horizontal or vertical offset to 0 and adding relatively high amount of blur provides a “glow“ effect; you can also use this to simulate ambient lighting effects. The same process can be applied to text-shadow. Further, box-shadow has an inset option, which provides an embossed appearance:

将水平或垂直偏移设置为0并添加相对大量的模糊可提供“发光”效果；您还可以使用它来模拟环境照明效果。可以将相同的过程应用于text-shadow 。此外， box-shadow具有插入选项，可提供压纹外观：

h3#inception-logo {
	font-family: "Arial Black", Arial, sans-serif;
	text-align: center;
	letter-spacing: .3em;
	padding: 0 2em;
	font-weight: 900;
	font-size: 55px;
	color: #fff;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) inset;
}

Animating box-shadow is fairly expensive in terms of browser performance; Tobias Ahlin has some excellent tricks for animating box-shadow smoothly.

就浏览器性能而言，动画box-shadow动画是相当昂贵的。托比亚斯·阿林(Tobias Ahlin)具有一些出色的技巧，可以使动画box-shadow平滑。