1. 程式人生 > >(box-shadow)陰影-CSS內陰影

(box-shadow)陰影-CSS內陰影

ref enter img borde back ie6 註意 情況 chrom

註意:ie6~ie8都不支持邊框陰影(box-shadow),ie9+,Firefox,Chrome,Opera支持邊框陰影屬性(box-shadow)

內陰影 (inset)

外陰影:【默認為外陰影】

在邊框陰影(box-shadow)的基本語法中,參數inset是可選可不選的,選參數inset,將外部陰影改為內部陰影;而不選參數inset,即默認情況下是外部陰影的。

HTML:

<div>box</div>

CSS:

一、(外陰影) div{
width:200px;
height:200px;
margin:50px auto;
line-height: 200px;
text-align: center;
background: skyblue;
border:2px solid cadetblue;
box-shadow: black 0px 0px 30px 5px;
}

(陰影)最終效果:

技術分享圖片

二、(內陰影) div{
width:200px;
height:200px;
margin:50px auto;
line-height: 200px;
text-align: center;
background: skyblue;
border:2px solid cadetblue;
box-shadow: black 0px 0px 30px 5px inset;(加inset)
}

(內陰影)最終效果:

技術分享圖片

box-shadow: black 0px 0px 30px 5px inset;)為陰影屬性以及屬性值

僅需在屬性值最後加上inset單詞,其陰影就會變成內陰影

(box-shadow)陰影-CSS內陰影