盒子陰影

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子陰影</title>
<style>
#box{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: blue;
/*X偏移量 Y偏移量 陰影模糊距離 陰影距離 陰影顏色 */
box-shadow: 2px 2px 2px 10px red;
}

</style>

</head>
<body>
<div id="box"></div>
</body>
</html>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • text-shadow是給文本添加陰影效果，box-shadow是給元素塊添加周邊陰影效果。隨著HTML5和CSS...
    arlene112閱讀 2,280評論 0贊 1
  • 1、屬性選擇器：id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,655評論 0贊 7
  • div{ width: 200px; height: 200px; background-...
    R5_菜鳥閱讀 270評論 0贊 0
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,327評論 0贊 11
  • 這南國，也有漫漫無際的大雪，是今年冬天最好的驚喜；記得上一次，是靜默在北方的天井院子，聽雪里的心聲；再一次看著梨花...
    衍瀟閱讀 210評論 0贊 0