[分享]css3教程块阴影与圆角阴影

CSS3中提供了多种给块元素添加阴影的方式，其中包括圆角阴影和普通块阴影。这些特性都能够帮助网页开发者更好地展示他们的设计。 圆角阴影 圆角阴影特性可以让你为一个块元素添加一个具有圆角的阴影。下面是...

CSS3中提供了多种给块元素添加阴影的方式，其中包括圆角阴影和普通块阴影。这些特性都能够帮助网页开发者更好地展示他们的设计。
## 圆角阴影
圆角阴影特性可以让你为一个块元素添加一个具有圆角的阴影。下面是一段HTML和CSS代码演示如何添加圆角阴影效果：

html
<pre>
HTML:
  <div class="box"></div>
<br>
CSS:
  .box {
    width: 200px;
    height: 200px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
  } 

这个例子中，我们创建了一个具有200x200像素尺寸和10像素圆角的块元素。我们使用box-shadow属性来给元素添加一个圆角阴影，并为它的位置、大小、模糊、扩张、颜色指定参数。设置box-shadow属性时，按照所需的顺序分别提供这些参数，它们之间使用空格隔开。
结果，我们得到了一个圆角矩形框，框内有一个黑色、半透明的阴影。我们可以改变参数来调整这个阴影的外观。
## 块阴影
块阴影特性可以让你给一个块元素添加一种普通的阴影效果。下面是一段HTML和CSS代码演示如何添加阴影效果：

html
<pre>
HTML:
  <div class="box"></div>
<br>
CSS:
  .box {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
  } 

这个例子中，我们创建了一个具有200x200像素尺寸的块元素，它有一个黑色、半透明的阴影效果。我们使用box-shadow属性来为它添加阴影效果，并为它的位置、大小、模糊、扩张、颜色指定参数。
总结一下，CSS3提供的圆角阴影和普通块阴影功能均可以让你更好地增强你网页的设计效果。使用这些特性时需要指定几个参数，包括位置、大小和颜色等。为了得到一个准确的阴影效果，你需要仔细调整这些参数。