CSS3不得不說的文字修飾

2021-07-23 20:30:28 字數 1906 閱讀 5836

css1中的相關屬性

1、font-family: 字型型別

2、font-style: normal | italic(斜體) | oblique(傾斜)

3、font-variant: normal | small-caps(小型的大寫字母)

4、font-weight: 100~900 | normal(400) | bold(700) | lighter | bolder

5、font: 復合屬性

5、color:

6、word-spacing: 詞間距

7、letter-spacing: 字元間距

8、text-decoration: none | underline | overline | line-through

9、vertical-align: 垂直方式

10、text-transform: none | capitalize | uppercase | lowercase

11、text-align: center | right | center | justify

12、text-indent: 首行縮排

13、line-height: 行高

css2中的相關屬性
1、font-size-adjust: 是否強制對文字使用同一尺寸

2、font-stretch: 字型是否橫向拉伸變形字型

3、text-shadow: 文字陰影

4、direction: 文字流入的方向 ltr | rtl

5、unicode-bidi

css3中相關屬性(顏色的不透明度是最大的亮點)
1、text-shadow: 橫向偏移 縱向偏移 模糊程度 模糊顏色

2、text-overflow: ellipsis(省略號顯示裁剪的文字) | clip(裁剪文字)

3、word-wrap: normal | break-word

4、hsl: h(色調)0~360 s(飽和度)0%~100% l(亮度)0%~100%

5、hsla:

6、rgba:

7、opacity: 不透明度 0~1

text-shadow

之前我還寫了一篇3種方式實現text-shadow的文章,大家可以看看^_^。

-----------------

text-shadow

-----------------

一般我們多是這樣用的: text-shadow: 5px 5px 10px rgb(23,123,222);

其實text-shadow也支援帶有逗號的值列表,所以我們又可以用text-shadow完成文字描邊的效果:

text-shadow: 3px 0 #fff,-3px 0 #fff,0

3px #fff,0 -3px #fff;

font

一般設定字型多採用font這個復合屬性,不僅僅是字型,很多其他的樣式多樂於去採用復合屬性宣告

------------

font

------------

例如 font

:14px/1.5

"helvetica neue",helvetica,arial,"microsoft yahei","hiragino sans gb","heiti sc","wenquanyi micro hei",sans-serif;

14px表示字型的大小;

1.5表示行高;

後面是一段字型的宣告,客戶端會優先使用前面的字型,如果沒有安裝,則會使用客戶端預設字型。

最後乙個sans-serif表示使用沒有襯線的字型。

不得不說的「跳槽」

現實中不難發現 越是高階人才,適合的機會就越少 的現象。身處金字塔中上層的人員,無論是職位還是薪水,起點都很高,這客觀上造成適合的職位機會少,職業路徑轉換成本過高等問題。我個人認為,it技術高層人士,如果要跳槽,務必要注意三宜和三忌。忌 病急亂投醫 宜 方法得當 公升遷至較高職位的人,大多都多年不找...

ios icon 不得不說的故事

圖示是ios程式包所必需的組成部分。如果你沒有提供程式所需的各種尺寸的圖示,程式上傳發布時可能會無法通過驗證。ios程式為兼顧不同的應用場景,定義了多個不同規格的圖示,並以不同的命名區分 圖示名稱 大小圓角 用途必需 icon.png 57 x 57 10px 用於程式商店和在iphone ipod...

CSS3 Transform不得不說的乙個小知識點

在逆戰班學習了將近乙個月了吧,想來說一下我在使用transform這個屬性過程中總會忘記 總會在這裡跌倒的問題 真的是一部辛酸史啊,老記不住,趁著現在記著趕緊記錄下來 關於css3的transform屬性,是乙個非常好用的屬性,這個屬性允許我們對元素進行位移 translate 旋轉 rotate ...