欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

邊框四邊陰影CSS(box-shadow屬性)內(nèi)側(cè)陰影、外側(cè)陰影、陰影顏色CSS大全

老白8年前8161瀏覽0評(píng)論

1、先來一個(gè)最簡單最常用的box-shadow屬性陰影案例:

CSS四邊陰影.png

邊框陰影,四邊都是陰影,目前扁平化網(wǎng)站中唯一常用的一種效果,特別是鼠標(biāo)觸發(fā)后邊框帶陰影更是常用。

上圖的代碼和CSS如下:

<!doctype html>    
<html>    
<head>    
<meta charset="utf-8">    
<title>無標(biāo)題文檔</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做陰影:

zblogbox-shadow陰影邊框?qū)傩?png

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>