css3中有陰影效果;分別是:1、文字陰影效果,利用「text-shadow」屬性即可,語法「text-shadow:水平垂直...」;2、陰影框效果,利用「box-shadow」屬性即可,語法「box-shadow:水平垂直...」。
本教學操作環境:windows10系統、CSS3&&HTML5版本、Dell G3電腦。
1、「text-shadow」屬性代表文字陰影
語法為
text-shadow:水平阴影 垂直阴影 模糊程度 颜色
text -shadow屬性連接一個或更多的陰影文字。屬性是陰影,指定的每2或3個長度值和一個可選的顏色值用逗號分隔開來。已失時效的長度為0。
範例如下:
123 Text-shadow effect
注意:IE 9及更早版本的浏览器不支持 text-shadow 属性.
輸出結果:
#2、「box-shadow」代錶盒子陰影
語法為
box-shadow:水平阴影 垂直阴影 模糊距离 大小
boxShadow 屬性把一個或多個下拉陰影加入到框框上。此屬性是一個用逗號分隔陰影的列表,每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。
範例如下:
123
輸出結果:
#(學習影片分享:css影片教學)
以上是css3有陰影效果嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!