边框四边阴影CSS（box-shadow属性）内侧阴影、外侧阴影、阴影颜色CSS大全_CSS学习

资料来源：网络整理时间：2023/3/4 0:55:21 共计：3630 浏览

1、先来一个最简单最常用的box-shadow属性阴影案例：

边框阴影，四边都是阴影，目前扁平化网站中唯一常用的一种效果，特别是鼠标触发后边框带阴影更是常用。

上图的代码和CSS如下：

<!doctype html>    
<html>    
<head>    
<meta charset="utf-8">    
<title>无标题文档</title>    
</head>    
<body>    
<style>    
div { width: 500px; height: 200px; border:1px solid #eee;box-shadow: 0 0 5px rgba(0,0,0,.1);}    
</style>    
<div>哈哈，我知道了。</div>    
</body>    
</html>

2、如果需求更多特效，看下面的演示站吧，看你需求用box-shadow做阴影：

HTML和CSS：

<!DOCTYPE html>  

<html>  

  

<head>  

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">  

<title>CSS3属性：box-shadow测试</title>

<style type="text/css">  

.box-shadow-1{  

  -webkit-box-shadow: 3px 3px 3px;  

  -moz-box-shadow: 3px 3px 3px;  

  box-shadow: 3px 3px 3px;  

}  

.box-shadow-2{  

  -webkit-box-shadow:0 0 10px #0CC;  

  -moz-box-shadow:0 0 10px #0CC;  

  box-shadow:0 0 10px #0CC;  

}  

.box-shadow-3{  

  -webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);  

  -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);  

  box-shadow:0 0 10px rgba(0, 204, 204, .5);  

}  

.box-shadow-4{  

  -webkit-box-shadow:0 0 10px 15px #0CC;  

  -moz-box-shadow:0 0 10px 15px #0CC;  

  box-shadow:0 0 10px 15px #0CC;  

}  

.box-shadow-5{  

  -webkit-box-shadow:inset 0 0 10px #0CC;  

  -moz-box-shadow:inset 0 0 10px #0CC;  

  box-shadow:inset 0 0 10px #0CC;  

}  

.box-shadow-6{  

    box-shadow:

 -10px 0 10px red, /*左边阴影*/  

    10px 0 10px yellow, /*右边阴影*/  

    0 -10px 10px blue, /*顶部阴影*/  

    0 10px 10px green; /*底边阴影*/  

}  

.box-shadow-7{  

    box-shadow:0 0 10px 5px black,  

    0 0 10px 20px red;  

}  

.box-shadow-8{  

    box-shadow:0 0 10px 20px red,  

    0 0 10px 5px black;  

}  

.box-shadow-9{  

    box-shadow: 0 0 0 1px red;  

}  

  

  

  

.obj{  

    float: left;

 width:100px;  

    height:100px;  

    margin:50px 20px;  

    background:#eee;      

}  

.outer{  

    width: 100px;  

    height: 100px;  

    border: 1px solid red;  

}  

.inner{  

    width: 60px;  

    height: 60px;

    background-color: red;  

    -webkit-box-shadow: 50px 50px blue;  

    -moz-box-shadow: 50px 50px blue;  

    box-shadow: 50px 50px blue;  

  }  

</style>  

</head>  

  

<body>  

    <div class="obj box-shadow-1"></div>  

    <div class="outer">  

        <div class="inner"></div>  

    </div>  

    <div class="obj  box-shadow-2" >1</div>  

    <div class="obj  box-shadow-3" >2</div>  

    <div class="obj  box-shadow-4" >3</div>  

    <div class="obj  box-shadow-5" >4</div>  

    <div class="obj  box-shadow-6" >5</div>  

    <div class="obj  box-shadow-7" >6</div>  

    <div class="obj  box-shadow-8" >7</div>  

    <div class="obj  box-shadow-9" >8</div>  

     

  

</body>  

</html>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：bootstrap幻灯片/轮播特效代码_网页特效 | ·下一条：垂直居中（上下左右都居中）任何元素CSS代码_CSS学习