边框四边阴影CSS(box-shadow属性)内侧阴影、外侧阴影、阴影颜色CSS大全

老白 9个月前 861浏览 0评论

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

边框四边阴影CSS(box-shadow属性)内侧阴影、外侧阴影、阴影颜色CSS大全 CSS学习 第1张

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

上图的代码和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做阴影:

边框四边阴影CSS(box-shadow属性)内侧阴影、外侧阴影、阴影颜色CSS大全 CSS学习 第2张

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>


发表评论