CSS 框阴影


目录

    显示目录


CSS box-shadow 属性

CSS box-shadow 属性用于应用 一个或多个元素的阴影。


指定水平和垂直阴影

在最简单的使用中,您只需指定水平和垂直阴影。阴影的默认颜色是当前文本颜色。

A <div> element with a box-shadow

例子

指定水平和垂直阴影:

   div
{
  box-shadow: 10px 10px;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>This is a div element with a box-shadow</div>

</body>
</html>



指定阴影的颜色

color 参数定义阴影的颜色。

A <div> element with a lightblue box-shadow

例子

指定阴影的颜色:

  div
{
  box-shadow: 10px 10px lightblue;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a lightblue box-shadow</div>

</body>
</html>



为阴影添加模糊效果

blur 参数定义模糊半径。数字越高,阴影越模糊。

A <div> element with a 5px blurred, lightblue box-shadow

例子

为阴影添加模糊效果:

   div
{
  box-shadow: 10px 10px 5px lightblue;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a 5px blurred, lightblue box-shadow.</div>

</body>
</html>



设置阴影的扩散半径

spread 参数定义传播半径。正值会增加阴影的大小,负值会减小阴影的大小。

A <div> element with a blurred, lightblue box-shadow, with a spread radius of 12px

例子

设置阴影的扩散半径:

   div
{
  box-shadow: 10px 10px 5px 12px lightblue;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a blurred, lightblue box-shadow, with a spread radius of 12px.</div>

</body>
</html>




设置插入参数

inset 参数将阴影从外部阴影(开始)更改为内部阴影。

A <div> element with a blurred, lightblue, inset box-shadow

例子

添加插入参数:

   div
{
  box-shadow: 10px 10px 5px lightblue inset;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a blurred, lightblue, inset box-shadow.</div>

</body>
</html>



添加多个阴影

一个元素也可以有多个阴影:

例子

   div
{
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
  margin: 20px;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
  margin: 20px;
}
</style>
</head>
<body>

<h1>Multiple Shadows</h1>

<div id="example1">
  <h2>Multiple shadows</h2>
  <p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
</div>
<br>

<div id="example2">
  <h2>Multiple shadows with blur effect</h2>
  <p>box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:</p>
</div>

</body>
</html>



您还可以使用 box-shadow 属性来创建类似纸质的卡片:

1

January 1, 2021

Norway

Hardanger, Norway

例子

  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;
}

尝试一下(文字卡)→

<!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>

<h1>Create Cards</h1>

<p>The box-shadow property can be used to create paper-like cards:</p>

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2021</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>

<h1>Create Polaroid Images</h1>

<p>The box-shadow property can be used to create polaroid images:</p>

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>

</body>
</html>




CSS 阴影属性

下表列出了 CSS 阴影属性:

box-shadow

向元素添加一个或多个阴影

text-shadow

向文本添加一个或多个阴影