search

Home >Web Front-end >CSS Tutorial >How to use the background-clip property in CSS3

How to use the background-clip property in CSS3

青灯夜游
青灯夜游Original
2019-02-19 17:10:193799browse

Usage of background-clip attribute in CSS3: [background-clip:border-box|padding-box|content-box]. The background-clip attribute is used to specify the drawing area of ​​the background.

How to use the background-clip property in CSS3

##CSS background-clip property

Function: Requirements The drawing area of ​​the background.

(Recommended tutorial:

CSS tutorial)

Syntax: 

background-clip: border-box|padding-box|content-box;

Attribute value:

● Border-box: The background is cropped to the border box, that is, the area within the border.

●Padding-box: The background is cropped to the padding box, that is, the area within the padding.

● Content-box: The background is cropped to the content box, that is, the area within the content.

Note: Internet Explorer 8 and earlier versions do not support the background-clip attribute.

Usage example of CSS background-clip property

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}
</style>
</head>
<body>

<div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

</body>
</html>

Rendering:


How to use the background-clip property in CSS3

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to use the background-clip property in CSS3. For more information, please follow other related articles on the PHP Chinese website!

php css css3 内边距 padding border background
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use the background-repeat attributeNext article：How to use the background-repeat attribute

Related articles

See more