首頁 > web前端 > css教學 > css陰影效果如何實現

css陰影效果如何實現

coldplay.xixi
發布: 2023-01-03 09:26:50
原創
4573 人瀏覽過

css陰影效果的實作方法:使用屬性【Box-shadow】表現陰影效果,內陰影【box-shadow:inset 2px 2px 5px #000】;外陰影【box-shadow:2px 2px 5px # 000】。

css陰影效果如何實現

本教學操作環境:windows7系統、css3版,DELL G3電腦。

css陰影效果的實作方法:

使用Box-shadow屬性表現陰影效果是現代瀏覽器中是一個非常有用的技巧,透過它我們可以做出很多非常酷的東西。

基本用法

css陰影效果如何實現

css陰影效果如何實現

#外陰影

box-shadow:2px 2px 5px #000;
登入後複製

css陰影效果如何實現

box-shadow:0px 0px 10px #000;
登入後複製

css陰影效果如何實現

內陰影

css陰影效果如何實現

box-shadow:inset 2px 2px 5px #000;
登入後複製

陰影擴展長度值

css陰影效果如何實現

box-shadow:0px 0px 5px 10px #000;
登入後複製

css陰影效果如何實現

#
box-shadow:0px 15px 10px -15px #000;
登入後複製

css陰影效果如何實現##

box-shadow:inset 0px 15px 10px -15px #000;
登入後複製

css陰影效果如何實現

# #多重陰影

############相關教學推薦:######################相關教學建議:########## CSS影片教學#############

以上是css陰影效果如何實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板