CSS 例項之文字的凸起與凹陷

2021-09-28 05:42:14 字數 455 閱讀 1854

一些頁面會有一些凹凸文字效果,這個主要是設定背景 文字陰影來達成這個效果的。文字陰影使用方法如下:

text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色

具體**如下:

body div div:first-child div:last-child

<

body

>

<

div>凸起

div>

<

div>凹陷

div>

body

>

結果如下圖所示

將文字上方陰影設為亮色,下方陰影設為暗色則是凸起效果

上方陰影設為暗色,下方陰影設為亮色則是凹陷效果

更多專業前端知識,請上

【猿2048】www.mk2048.com

CSS3入門之文字與字型

1 css3文字效果 語法 text shadow h shadow v shadow blur color 水平陰影 垂直陰影 模糊距離 陰影顏色 示例 該屬性相容ie10 以及所有現代瀏覽器 語法 word break normal break all keep all normal 預設換行 ...

CSS文字與字型的屬性

p元素選擇器會層疊掉box1,而span卻會繼承,因為父類的字型大小即為1em 可以設定多個字型,從左到右按順序直到找到可用的字型。英文本型只適用於英文而中文字型同時適用於中文和英文。100 200 300 900 對應於文字的不同重量 元素高度為100px,若不設定行高,文字無法垂直居中 補充 c...

CSS之對字型和文字的修飾

一.字型 1.設定文字字型 font family該屬性值一般選取微軟雅黑 2.設定字型大小 font size該屬性值一般為某某px,px是畫素 3.設定字型顏色 color確定該屬性的值一般有三種方法 1 後加ps拾色器中顏色對應的十六進製制數值,當六位值重複一樣時,可以按每兩位一簡化的方法將數...