在CSS中,可以使用text-shadow
屬性為字體設(shè)置陰影。text-shadow
屬性接受四個值,分別是水平陰影、垂直陰影、模糊距離和顏色。
以下代碼將為字體設(shè)置向右偏移10px、向下偏移5px、模糊距離為3px的藍色陰影:
h1 { text-shadow: 10px 5px 3px blue; }
在text-shadow
屬性中,水平陰影和垂直陰影的值可以是正數(shù)或負數(shù),表示陰影在水平和垂直方向上的偏移距離,模糊距離的值表示陰影的模糊程度,值越大,陰影越模糊,顏色值表示陰影的顏色。
除了text-shadow
屬性,CSS還提供了filter
屬性,可以使用該屬性為字體設(shè)置更復(fù)雜的陰影效果,以下代碼將為字體設(shè)置向右偏移10px、向下偏移5px、模糊距離為3px的藍色陰影,并在陰影周圍添加一圈光暈:
h1 { text-shadow: 10px 5px 3px blue; filter: blur(3px) drop-shadow(10px 5px 3px blue); }
在filter
屬性中,blur
函數(shù)表示對字體進行模糊處理,drop-shadow
函數(shù)表示在字體周圍添加一圈光暈,兩個函數(shù)的參數(shù)與text-shadow
屬性的參數(shù)類似,分別表示水平陰影、垂直陰影、模糊距離和顏色。
通過以上兩種方法,可以為字體設(shè)置出豐富多彩的陰影效果。