css3有陰影效果嗎

WBOY
發布: 2022-04-22 18:22:12
原創
1365 人瀏覽過

css3中有陰影效果;分別是:1、文字陰影效果,利用「text-shadow」屬性即可,語法「text-shadow:水平垂直...」;2、陰影框效果,利用「box-shadow」屬性即可,語法「box-shadow:水平垂直...」。

css3有陰影效果嗎

本教學操作環境:windows10系統、CSS3&&HTML5版本、Dell G3電腦。

css3有陰影效果嗎

1、「text-shadow」屬性代表文字陰影

語法為

text-shadow:水平阴影 垂直阴影 模糊程度 颜色
登入後複製

text -shadow屬性連接一個或更多的陰影文字。屬性是陰影,指定的每2或3個長度值和一個可選的顏色值用逗號分隔開來。已失時效的長度為0。

範例如下:

   123  
  

Text-shadow effect

注意:IE 9及更早版本的浏览器不支持 text-shadow 属性.

登入後複製

輸出結果:
css3有陰影效果嗎

#2、「box-shadow」代錶盒子陰影

語法為

box-shadow:水平阴影 垂直阴影 模糊距离 大小
登入後複製

boxShadow 屬性把一個或多個下拉陰影加入到框框上。此屬性是一個用逗號分隔陰影的列表,每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。

範例如下:

   123  
  
登入後複製

輸出結果:

css3有陰影效果嗎

#(學習影片分享:css影片教學

以上是css3有陰影效果嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!