CSS3 盒子阴影：both、outter和inner

在本文中，我们将介绍CSS3中的盒子阴影属性：both、outter和inner。盒子阴影是CSS3中一个常用的特效属性之一，通过添加阴影可以让元素在页面中具有更加立体的效果和视觉差异。

阅读更多：CSS 教程

盒子阴影概述

盒子阴影是通过CSS的box-shadow属性实现的。它可以应用于各种HTML元素，包括块级元素、行内元素、文本和图片等。通过调整盒子阴影的样式、位置和大小，我们可以创建出各种不同的效果。

box-shadow的基本语法

要设置一个盒子阴影，我们需要使用box-shadow属性，并指定阴影的样式、位置和大小。box-shadow属性可以接受多个参数，每个参数代表一个阴影层。具体的语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow：表示水平方向上的阴影偏移量，可以是正值、负值或者0。正值表示阴影向右偏移，负值表示阴影向左偏移，0表示无阴影偏移。
• v-shadow：表示垂直方向上的阴影偏移量，可以是正值、负值或者0。正值表示阴影向下偏移，负值表示阴影向上偏移，0表示无阴影偏移。
• blur：表示阴影的模糊半径，可以是正值、负值或者0。正值表示阴影更加模糊，负值表示阴影更加锐利，0表示无阴影模糊。
• spread：表示阴影的尺寸，可以是正值、负值或者0。正值表示阴影扩大，负值表示阴影收缩，0表示无阴影尺寸变化。
• color：表示阴影的颜色，可以是具体的颜色值或者透明度值。默认值为黑色（#000000）。
• inset：可选参数，表示是否将阴影设置为内阴影。如果指定了该参数且值为inset，则表示内阴影，不指定该参数或者设为其他值则表示外阴影。

下面是一个示例代码，展示了如何设置一个具有基本阴影效果的盒子：

.box {
  width: 200px;
  height: 200px;
  background-color: #f4f4f4;
  box-shadow: 5px 5px 10px #ccc;
}

以上代码将在一个宽高为200px的灰色盒子中添加了一层向右下方偏移5px的10px模糊半径的阴影。

盒子阴影效果示例

1. both：内外阴影效果
   box-shadow属性的默认值为outter，表示创建一个外阴影效果。如果我们想要同时创建内外阴影效果，可以将阴影的类型设置为both。

   .box {
    width: 200px;
    height: 200px;
    background-color: #f4f4f4;
    box-shadow: 5px 5px 10px #ccc, inset 5px 5px 10px #ddd;
   }
   

   以上代码将在一个宽高为200px的灰色盒子中同时添加了一层外阴影和内阴影。

2. outter：外阴影效果
   outter是box-shadow属性的默认值，表示创建一个外阴影效果。下面是一个示例代码，展示了如何创建一个仅有外阴影效果的盒子：

   .box {
    width: 200px;
    height: 200px;
    background-color: #f4f4f4;
    box-shadow: 5px 5px 10px #ccc;
   }
   

   以上代码将在一个宽高为200px的灰色盒子中添加了一层向右下方偏移5px的10px模糊半径的外阴影。

3. inner：内阴影效果
   如果我们想要创建一个内阴影效果，可以在box-shadow属性的值中添加inset参数。下面是一个示例代码，展示了如何创建一个仅有内阴影效果的盒子：

   .box {
    width: 200px;
    height: 200px;
    background-color: #f4f4f4;
    box-shadow: inset 5px 5px 10px #ccc;
   }
   

   以上代码将在一个宽高为200px的灰色盒子中添加了一层向右下方偏移5px的10px模糊半径的内阴影。

总结

通过CSS3的box-shadow属性，我们可以很方便地实现各种盒子阴影效果。我们可以通过调整阴影的样式、位置和大小，创造出不同的视觉效果，使页面元素更加立体和有层次感。希望本文对您学习CSS3盒子阴影属性有所帮助！