DIV+CSS3中box-shadow對象實現(xiàn)盒子陰影和圖片陰影的示例分析

發(fā)布時間：2021-07-28 09:00:19 來源：億速云閱讀：185 作者：小新欄目：web開發(fā)

這篇文章主要介紹了DIV+CSS3中box-shadow對象實現(xiàn)盒子陰影和圖片陰影的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、CSS樣式單詞與使用語法

1、盒子陰影樣式單詞：box-shadow

2、語法

p{box-shadow:0 0 1px #000 inset;}

代表邊框間距靠左0 靠上0 和1px陰影范圍陰影顏色為黑色（#000），有inset 代表框內(nèi)陰影，不帶inset 代表框外陰影。

注意：
box-shadow:0px 0px 1px #000
第1個值為0時，代表左右邊框陰影為1px范圍
第1個值為正整數(shù) 代表左邊框陰影
第1個值為負(fù)整數(shù) 代表右邊框陰影
同理
第2個值為0 代表上下邊框陰影
第2個值為正整數(shù) 代表1px陰影距離上邊框多少
第1個值為負(fù)整數(shù) 代表下邊框陰影設(shè)置

3、瀏覽器兼容圖

DIV+CSS3中box-shadow對象實現(xiàn)盒子陰影和圖片陰影的示例分析瀏覽器兼容一覽表圖

二、pCSS5案例

pCSS5分別對p盒子和圖片IMG設(shè)置內(nèi)陰影和外陰影為案例。

1、案例HTML代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>對象陰影 在線演示 DIVCSS5 VIP</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
<!-- www.divcss5.com --> 
</head> 
<body> 
<div>盒子對象陰影測試</div> 
<div class="box">DIV盒子內(nèi)陰影</div> 
<div>圖片對象陰影測試</div> 
<div class="box2"><img src="images/45.gif" /></div> 
</body> 
</html>

2、案例CSS代碼

.box {box-shadow:5px 2px 6px #000 inset; width:300px; height:80px; margin:0 auto} 
.box2 img {box-shadow:5px 2px 6px #000}

分別設(shè)置p對象內(nèi)陰影效果和圖片外陰影效果

3、案例截圖

DIV+CSS3中box-shadow對象實現(xiàn)盒子陰影和圖片陰影的示例分析

p內(nèi)陰影和CSS圖片外陰影效果截圖

4、說明：需要在IE9及以上瀏覽器測試應(yīng)用或谷歌、蘋果等瀏覽器進(jìn)行測試

5、CSS3在線演示：（在IE9以上瀏覽器、谷歌等瀏覽器測試）

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“DIV+CSS3中box-shadow對象實現(xiàn)盒子陰影和圖片陰影的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

DIV+CSS3中box-shadow對象實現(xiàn)盒子陰影和圖片陰影的示例分析

一、CSS樣式單詞與使用語法

二、pCSS5案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

一、CSS樣式單詞與使用語法