css box-shadow 给边框添加阴影效果

时间:2016-07-17
在css3之前,我们如果要给边框添加阴影,需要使用背景图片的方法来实现,但css3之后,我们可以直接使用box-shadow属性给HTML元素添加阴影效果,本文章向大家介绍css3 box-shadow属性的使用方法和使用实例。

box-shadow介绍

css3可以使用box-shadow属性轻松地为元素添加阴影效果,box-shadow可以设定多组效果,每组参数值以逗号分隔.

语法:

box-shadow:x-shadow  y-shadow  blur  spread  color  inset;

参数说明:

  • x-shadow:设置对象的阴影水平偏移值,单位可以是px、em或百分比等,允许负值。
  • y-shadow:设置对象的阴影垂直偏移值,单位可以是px、em或百分比等,允许负值。
  • blur:用于设置边框阴影半径大小。
  • spread:扩展半径,设置阴影的尺寸;这个参数可选,缺省时值为0。
  • color:设置阴影的颜色;
  • inset:这个参数默认不设置。默认情况下为外阴影,inset表示内阴影。

 

box-shadow实例

给div元素添加阴影效果:

<!DOCTYPE html>
<html>
<head>
<title>http://www.manongjc.com/article/1201.html</title>
<style> 
div{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

在线运行

上一页 下一页

原文地址:http://www.manongjc.com/article/1201.html