CSS box-shadow 属性

最新推荐文章于 2025-06-30 22:07:10 发布

转载最新推荐文章于 2025-06-30 22:07:10 发布 · 69 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/izengbin/p/6708185.html

本文详细介绍了如何使用CSS的box-shadow属性来为元素添加阴影效果。包括水平阴影、垂直阴影、模糊距离及阴影尺寸等参数的具体设置方法，并通过实例展示了如何同时应用多个不同颜色和样式的阴影。

div{
    width:200px;
    height:200px;
    border:1px solid #000066;
    margin:100px;
    background-color:#ccc;

    /*
    *向框添加一个或多个阴影，设置阴影元素的值
    *box-shadow: h-shadow v-shadow blur spread color inset;
    *h-shadow 必需。水平阴影的坐标。允许负值。
    *v-shadow 必需。垂直阴影的坐标。允许负值。
    *blur 可选。模糊距离。负值阴影元素将不可见
    *spread 可选。设置阴影元素的尺寸。0px和源对象一样大，允许负值。
    */

    /*
    *示例：右边显示红色阴影，左边显示灰色阴影，上面显示蓝色阴影
    */
    -webkit-box-shadow:5px 0px 8px -3px red,-15px 0px 8px -5px #888,0px -15px 8px -5px blue;
}