css怎樣添加陰影邊框

發(fā)布時(shí)間：2022-03-08 17:39:54 來(lái)源：億速云閱讀：110 作者：小新欄目：web開發(fā)

小編給大家分享一下css怎樣添加陰影邊框，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　一：css陰影邊框使用語(yǔ)法：

　　1.屬性：box-shadow

　　2.使用方法：

　　div{box-shadow:001px#000inset;}

　　3.陰影使用方法分析：

　　第一個(gè)零代表距離對(duì)象左邊距離為0，并且開始顯示陰影，第二個(gè)零表示距離對(duì)象上間距對(duì)象為0，就開始顯示陰影，1px表示陰影的范圍1px，#000代表著陰影的顏色，inset表示對(duì)象內(nèi)陰影，對(duì)象外就不設(shè)置陰影。

　　4.兼容問題

　　火狐瀏覽器3.5版本和谷歌都是可以支持box-shadow屬性。

　　二：css如何添加陰影邊框？

　　在了解了陰影屬性是什么了之后，我們來(lái)講一下css如何添加陰影邊框，以下代碼就表示給邊框添加陰影邊框。

<!DOCTYPEhtml>
 
　　<html>
 
　　<head>
 
　　<metacharset="utf-8">
 
　　<title>CSS測(cè)試</title>
 
　　<style>
 
　　.box{box-shadow:5px2px6px#000inset;width:300px;height:80px;margin:0auto}
 
　　.box2img{box-shadow:5px2px6px#000}
 
　　</style>
 
　　<body>
 
　　<div>盒子對(duì)象陰影測(cè)試</div>
 
　　<divclass="box">DIV盒子內(nèi)陰影</div>
 
　　<div>圖片對(duì)象陰影測(cè)試</div>
 
　　<divclass="box2"><imgsrc="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"/></div>
 
　　</body>
 
　　</html>

以上是“css怎樣添加陰影邊框”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

css怎樣添加陰影邊框

猜你喜歡

最新資訊

相關(guān)推薦

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