CSS3的边框（四）

来源：互联网发布：cms文章表编辑：程序博客网时间：2024/04/30 06:29

三、边框阴影

设置边框阴影box-shadow不会影响盒子的布局，即不会影响其兄弟元素的布局

spread可以与blur、h-shadow、v-shadow相互抵消，blur不可为负值

可以设置多重边框阴影，实现更好的效果，增强立体感。

语法：box-shadow:offset-x offset-y blur spresd color position;

属性值说明：

offset-x ，offset-y指的是元素水平偏移量；

blur：表示阴影的模糊半径；

spread：阴影尺寸（从元素到阴影的距离），正值会在元素的各个方向按指定的数值延伸阴影，负值会使阴影收缩的比本身元素的尺寸还小。

color：阴影的颜色值；

position：可选，表示阴影的位置，默认值是外部阴影，关键字inset指的是内部阴影。

<!DOCTYPE html>

<head>

<title>Document</title>

div{

width: 100px;

height: 50px;

background: yellowgreen;

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */

box-shadow: 10px 10px 5px #888888;

}

</style>

</head>

<body>

</body>

</html>

实现效果如下：

box-shadow属性还可以设置多重边框

<!DOCTYPE html>

<head>

<title>Document</title>

div {

width: 100px;

height: 60px;

margin: 25px;

background: yellowgreen;

box-shadow: 0 0 0 10px #655,

0 0 0 15px deeppink,

0 2px 5px 15px rgba(0,0,0,.6);

} box-shadow: 10px 10px 5px #888888;

}

</style>

</head>

<body>

</body>

</html>

运行结果如下图：

0 0