CSS3 Box Shadow

CSS3 box-shadow 属性

CSS3 box-shadow 属性应用阴影于元素。

最简单的用法是只指定水平阴影和垂直阴影：

带有黑色 box-shadow 的黄色 <div> 元素

代码如下:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px;
}
</style>
</head>
<body>
<h1>box-shadow 属性</h1>
<div>已设置 box-shadow 的 div 元素</div>
</body>
</html>

运行一下

接下来，为阴影添加颜色：

带有灰色 box-shadow 的黄色 <div> 元素

代码如下:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px grey;
}
</style>
</head>
<body>
<div>已设置 box-shadow 的 div 元素</div>
</body>
</html>

运行一下

接下来，向阴影添加模糊效果：

黄色的 <div> 元素，带有模糊的 box-shadow

代码如下:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px 5px grey;
}
</style>
</head>
<body>
<div>已设置 box-shadow 的 div 元素</div>
</body>
</html>

运行一下

卡片

您还可以使用 box-shadow 属性创建纸质卡片效果：

January 1, 2016

Hardanger, Norway

左边文本卡片代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
div.header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 40px;
}
div.container {
  padding: 10px;
}
</style>
</head>
<body>
<h2>卡片效果</h2>
<p>“长方体阴影”属性可用于创建纸样卡片:</p>
<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>
  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>
</body>
</html>

运行一下

右边图片卡片效果代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
div.container {
  padding: 10px;
}
</style>
</head>
<body>
<h2>图片卡片效果</h2>
<p>“长方体阴影”属性可用于创建纸样卡片:</p>
<div class="polaroid">
  <img src="/znadmin/md/1286/0.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>
</body>
</html>

运行一下

CSS 阴影属性

下表列出了 CSS 的阴影属性：

属性	描述
box-shadow	向一个元素添加一个或多个阴影。
text-shadow	在文本中添加一个或多个阴影。

CSS3 Box Shadow

CSS3 box-shadow 属性

卡片

CSS 阴影属性

分类导航