CSS - box-shadow 属性

上一页
下一页

CSS 的 box-shadow 属性在元素周围添加阴影效果时很有用。可以添加一个或多个阴影效果，用逗号分隔。

盒子阴影（box shadow） 由相对于元素的 X 和 Y 偏移量、模糊、扩散半径和颜色来描述。

可能的值

  • inset:
    • 如果未指定任何值，则假定 Shadow 为投影。
    • 如果使用插图，则阴影将绘制在边框内，位于背景上方，但位于内容下方。
  • <offset-x>：以<length>表示水平距离。负值将阴影定位在元素的左侧。
  • <offset-y>：以<length>表示垂直距离。负值将阴影置于元素上方。
  • <blur-radius>:
    • 设置模糊效果的半径。第三个<length>值。
    • 值越大，模糊度越大。
    • 不允许使用负值。
    • 如果没有值，则为 0，这将使阴影的边缘变得清晰。
  • <spread-radius>:
    • 设置阴影的大小。第四<length>值。
    • 正值使阴影变大。
    • 负值使阴影缩小。
    • 如果没有值，则为 0，这使得大小的阴影与元素相同。
  • <color>：可能的关键字和颜色表示法的颜色值，例如颜色名称、十六进制值、RGB 等。

适用于

所有 HTML 元素。

DOM 语法


object.style.boxShadow = "none|inset 10px 10px 5px rgb(255, 255, 255)";

CSS box-shadow - inset 值

下面是一个示例：


<html>
<style>
	 	 div {
	 	 	 	 margin: 4em;
	 	 	 	 padding: 1em;
	 	 	 	 height: 80px;
	 	 	 	 width: 80px;
	 	 	 	 display: inline-block;
	 	 }
	 	 #a {
	 	 	 	 box-shadow:10px 10px 10px 2em #f4aab9;
	 	 }
	 	 #b {
	 	 	 	 box-shadow:inset -20px -3em 3em rgba(228, 228, 35, 0.8); 	
	 	 }
	 	 #c {
	 	 	 	 box-shadow: 5px 15px 3px rgb(226, 67, 228);	
	 	 	 	 border: 1px solid black;	
	 	 }
</style>
<head>
</head>
<body>
	 	 <div id="a"></div>
	 	 <div id="b"></div>
	 	 <div id="c"></div>
</body>
</html>
打印本页
上一页
下一页