CSS3属性 box-shadow 向框添加一个或多个阴影

来源：互联网发布：rbac权限管理表mysql 编辑：程序博客网时间：2024/06/10 13:22

CSS3属性利用box-shadow制作网页页眉背景

box-shadow

浏览器支持

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

语法

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

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。测试 color 可选。阴影的颜色。请参阅 CSS 颜色值。 inset 可选。将外部阴影 (outset) 改为内部阴影。

常利用该语法制作网页顶部导航栏

下例为利用box-shadow制作的顶部导航栏背景

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>顶部导航栏背景</title><style>*{margin: 0; padding: 0;}.header_top{    width: 100%;    height: 29px;    border-top: 2px solid #eee;    background-color:#f9f9f9 ;    font-size: 12px;    box-shadow: 0 0 0 1px #FFFFFF,0 0 0 2px #ddd, 0 0 5px 3px #EEEEEE;  }</style></head> <div class="header_top"></div><body></body></html>

1 0

CSS3属性 box-shadow 向框添加一个或多个阴影

CSS3属性 利用box-shadow制作网页页眉背景

box-shadow

CSS3属性利用box-shadow制作网页页眉背景