本篇文章帶大家了解一下css text-emphasis屬性,通過幾個實例來介紹一下text-emphasis屬性的使用方法。
就一般而言,我們所做的頁面并非對于文學(xué)類用戶,因此也不太可能會接觸到“著重號”這個符號。如果對于 word 不陌生的朋友應(yīng)該會知道在 word 中有一個文本設(shè)置,就是設(shè)置“著重號”的。
電腦中沒有 word,就從百度上搜了一張,反正呢,大概就是這個效果了。
那么本文要說的 CSS 屬性也就是這個“著重號”的屬性,我們可以通過 text-emphasis
屬性設(shè)置文本“著重號”樣式。這是 text-emphasis-color
和 text-emphasis-style
這兩個屬性的簡寫方式,也就是說,我們可以通過 text-emphasis
同時設(shè)定“著重號”字符樣式以及顏色,比如:
p { -webkit-text-emphasis: dot red; text-emphasis: dot red; }
那么就可以看到這樣的效果。
至于在 word 中看到的是不是這樣的效果,這個我也不知道了,反正呢,在 web 頁面中,我們所看到的著重號不僅可以修改字符樣式以及顏色,還可以修改大小和位置。
text-emphasis-style
有好幾個屬性值,并且也可以輸入任意字符;text-emphasis-color
則可以使用常規(guī)的 web 中使用的顏色值,rgba()
、rgb()
什么的都可以;
而如果想要調(diào)整位置的話,那么就是要額外一個屬性 text-emphasis-position
,雖然看著這個屬性跟 style
和 color
很相近,但并不是 text-emphasis
簡寫中的一個。那么對于 text-emphasis-position
在常規(guī)的情況下,我們能控制的位置是上以及下這兩個方向,也就是:
text-emphasis-position: over;
text-emphasis-position: under;
如想要了解