新聞中心

專注于為中小企業(yè)提供成都網站建設、網站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)桂平免費做網站提供優(yōu)質的服務。我們立足成都,凝聚了一批互聯(lián)網行業(yè)人才,有力地推動了近千家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網站建設實現規(guī)模擴充和轉變。
1. text-shadow
使用 CSS 的 text-shadow 屬性我們可以為文本設置陰影效果,屬性的語法格式如下:
text-shadow: offset-x offset-y blur color;
語法說明如下:
- offset-x:必填參數,設置陰影的水平偏移量,可以為負值;
- offset-y:必填參數,設置陰影的垂直偏移量,可以為負值;
- blur:可選參數,設置模糊的半徑,值越大,模糊越大,陰影的邊緣越模糊,不允許使用負值;
- color:可選參數,設置陰影的顏色,如果省略或未指定該值,則采用 color 屬性的值。
提示:使用 text-shadow 屬性可以同時設定多組陰影效果,每組之間使用逗號分隔,定義的多組陰影效果會按照定義順序依次羅列,第一個陰影在最上面,以此類推。另外,若要取消文本的陰影效果則可以將 text-shadow 屬性的值設置為 none。
【示例】使用 text-shadow 屬性為文本添加陰影效果:
文本陰影效果
文本陰影效果
運行效果如下圖所示:
圖:text-shadow 屬性演示
2. box-shadow
使用 CSS 的 box-shadow 屬性我們可以為 HTML 元素設置陰影效果,屬性的語法格式如下:
box-shadow: h-shadow v-shadow blur spread color inset;
語法說明如下:
- h-shadow:必填參數,設置陰影水平方向的偏移量,可以為負值;
- v-shadow:必填參數,設置陰影垂直方向的偏移量,可以為負值;
- blur:可選參數,設置模糊的半徑,值越大,模糊越大,陰影的邊緣越模糊,不允許使用負值;
- spread:可選參數,設置陰影的尺寸;
- color:可選參數,設置陰影的顏色;
- inset:可選參數,將默認的外部陰影 (outset) 改為內部陰影。
提示:與 text-shadow 屬性相似,box-shadow 屬性也可以同時設定多組陰影效果,每組之間使用逗號分隔,定義的多組陰影效果會按照定義順序依次羅列,第一個陰影在最上面,以此類推。
【示例】使用 box-shadow 屬性為文本添加陰影效果:
運行效果如下圖所示:
圖:box-shadow 屬性演示
分享名稱:CSS陰影效果(2種方法)
網站鏈接:http://www.5511xx.com/article/ccdidgs.html


咨詢
建站咨詢
