How to realize the drop-off effect of the first word with initial-letter attribute in css
This article mainly introduces the css initial-letter attribute how to achieve the first word drop effect, the article is very detailed, has a certain reference value, interested friends must read it!
You can set two values in the initial-letter property:
Initial-letter: value 1, value 2
Value 1: row height represented
Value 2: indicates the degree of sinkness.
Here we will use a simple code example to see the effect:
Raised-cap::first-letter {
Color:#bf4055
Initial-letter:31
}
.sunken-cap::first-letter {
Color:#bf4055
Initial-letter:32
}
.drop-cap::first-letter {
Color:#bf4055
Initial-letter:3
}
Effect picture:
3.jpg
Is it very convenient and simple, but unfortunately there are still many browsers that do not support this attribute. Let's take a look at which browsers support it (green table support):
4.jpg
Although the browser's support for this attribute is still red all over the sky, we can use @ supports to do some downgrading to determine whether the browser supports it or not, so as to achieve the sinking effect of the first word:
/ / the browser supports the following methods
@ supports (initial-letter:5) or (- webkit-initial-letter:5) {
.intro: nth-of-type (1):: first-letter {
-webkit-initial-letter:3
Initial-letter:3
}
}
/ / the browser does not support the method of pseudo element + floating.
@ supports (not (initial-letter:5)) and (not (- webkit-initial-letter:5)) {
. intro::first-letter {
Color:#bf4055
Font-size:7.1875rem
Float:left
Line-height:.7
Margin:17px2px00
}
}
The above is all the content of the article "how to achieve the first word drop effect of initial-letter attribute in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
