css:box-shadow实现单边,多边阴影

简介: css:box-shadow实现单边,多边阴影

语法

box-shadow: X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色

示例:


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        .shadow div{
            float:left;
            margin:50px 120px;
            width:100px;
            height:100px;
            border:2px solid orange;
            text-align:center;
            line-height:100px;
         }
        .left{
            box-shadow:-5px 0 10px -5px #00ff00;
        }
        .bottom{
            box-shadow:0 5px 10px -5px #00ff00;
        }
        .right{
            box-shadow:5px 0 10px -5px #00ff00;
        }
        .top{
            box-shadow:0px -5px 10px -5px #00ff00;
        }
        .left-top{
            box-shadow:-5px -5px 10px  -4px #00ff00;            
        }        
        .right-top{
            box-shadow:5px -5px 10px -4px #00ff00;
        }
        .left-bottom{
            box-shadow:-5px 5px 10px -4px #00ff00;
        }
        .right-bottom{
            box-shadow:5px 5px 10px -4px #00ff00;
        }
        .no-left{
            /* .right-bottom,.right-top组合 */
            box-shadow:5px 5px 10px -4px #00ff00,5px -5px 10px -4px  #00ff00;
        }
        .no-bottom{
            /* .left-top,.right-top组合 */
            box-shadow:-5px -5px 10px  -4px #00ff00,5px -5px 10px -4px  #00ff00;
        }
        .no-right{
            /* .left-top,.left-bottom组合 */
            box-shadow:-5px -5px 10px  -4px #00ff00,-5px 5px 10px -4px #00ff00;
        }
        .no-top{
            /* .left-bottom,,right-bottom组合 */
            box-shadow:-5px 5px 10px -4px #00ff00,5px 5px 10px -4px #00ff00;
        }
    </style>
    <body>
    <div class="shadow">
        <div class="left">左边阴影</div>
        <div class="bottom">底部阴影</div>
        <div class="right">右部阴影</div>
        <div class="top">顶部部阴影</div>
        <div class="left-top">左上阴影</div>
        <div class="right-top">右上阴影</div>
        <div class="left-bottom">左下阴影</div>
        <div class="right-bottom">右下阴影</div>
        <div class="no-left">无左阴影</div>
        <div class="no-bottom">无下阴影</div>
        <div class="no-right">无右阴影</div>
        <div class="no-top">无上阴影</div>        
    </div>
    </body>
</html>

image.png


相关文章
|
7月前
|
前端开发
|
2月前
|
前端开发 UED
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
96 1
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
4月前
|
前端开发
CSS动画新技巧:打造阴影上下抖动的视觉效果!
CSS动画新技巧:打造阴影上下抖动的视觉效果!
|
5月前
|
前端开发
css特效实例——纯css实现带边角卷边阴影的纸
css特效实例——纯css实现带边角卷边阴影的纸
47 1
|
6月前
|
前端开发
css动画效果(边框流光闪烁阴影效果)
css动画效果(边框流光闪烁阴影效果)
|
7月前
|
前端开发
前端 CSS 经典:box-shadow
前端 CSS 经典:box-shadow
103 1
|
6月前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
54 0
|
6月前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
84 0
|
7月前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
54 0