Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.