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

This article introduces the relevant knowledge of "what is the background trimming attribute of background clip in CSS3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Clip, which means "trim, trim" in English, so it is obvious that the background-clip attribute must have something to do with background trimming, and that is exactly the case. There are four attribute values for background-clip: border-box, padding-box, content-box, and text.

Background-clip attribute value:

Value description

Border-box default value. The background is drawn in the border box (cut into a border box)

The padding-box background is drawn in the contrast box (cut into the contrast box)

The content-box background is drawn in the content box (cut into the content box)

Text fills the text with a picture background

Background-clip browser support

IE9+, Firefox, Opera, Chrome, and Safari support the background-clip attribute. Note: the background-clip attribute is not supported in InternetExplorer8 and earlier versions.

Background-clip attribute explanation

Next, I will explain each of these attribute values of background-clip through specific examples.

Border-box

.box {background-clip:border-box;}

Border, which means cutting out the background outside the border, so the final effect is the same as figure 1, that is, border-box is the default property value of background-clip.

Padding-box

.box {background-clip:padding-box;}

Padding, which means cutting off the background outside the inner margin

Content-box

.box {background-clip:content-box;}

Content, which means cutting out the background outside the content

Text

.box {- webkit-text-fill-color:transparent;background:-webkit-linear-gradient (right,#0f0,#00f);-webkit-background-clip:text;}

Text means cutting off the background outside the outline of the text and leaving only the part within the outline of the text. At this time, we only need to set the transparent color of the text to see the background color of the box through the text.

Background-clip:text, currently needs to be prefixed with webkit.

This is the end of the content of "what is the background trimming attribute of background clip in CSS3". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.