【详解】CSS阴影用法——Web前端系列学习笔记
生活随笔
收集整理的這篇文章主要介紹了
【详解】CSS阴影用法——Web前端系列学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
3. CSS陰影和漸變
盒陰影
對象選擇器 {box-shadow:投影方式|| X軸偏移量|| Y軸偏移量 ||陰影模糊半徑 || 陰影擴展半徑 ||陰影顏色 }投影方式：此參數是一個可選值，如果不設值，其默認的投影方式是外陰影，設置陰影類型為“inset”時，其投影就是內陰影。
x軸偏移量：是指陰影水平偏移量其值可以是正負值，如果值為正值，則陰影在對象的右邊，反之其值為負值時，陰影在對象的左邊。
y軸偏移量：是指陰影的垂直偏移量，其值也可以是正負值，如果為正值，陰影在對象的底部，反之其值為負值時，陰影在對象的頂部。
陰影模糊半徑：此參數是可選，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊。
陰影擴展半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值是，則縮小。
陰影顏色：此參數可選，如果不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不一樣，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。
樣例展示
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>對象陰影</title><link href="images/style.css" rel="stylesheet" type="text/css" /><style>.box {box-shadow: 7px 4px 10px #000 inset ;width:300px;height:80px;}.box1 img {box-shadow:#000 7px 4px 10px ;}</style> </head> <body> <h3>盒子對象陰影測試</h3> <div class="box">DIV盒子內陰影</div> <h3>圖片對象陰影測試</h3> <div class="box1"><img src="images/demo3-2/boxshadow.png" /></div> </body> </html>效果圖
總結
以上是生活随笔為你收集整理的【详解】CSS阴影用法——Web前端系列学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 详细解读CSS链接属性——Web前端系列
- 下一篇： 【详细解读】CSS渐变用法——Web前端