Home > Article > Web Front-end > How to use CSS3 border-image-outset property?
How to use CSS3 border-image-outset property?
- 青灯夜游Original
- 2019-02-12 13:49:433352browse
The border-image-outset attribute is used to specify the amount of the border image area drawn outside the border, that is, the amount by which the border image exceeds the border box.
CSS3 border-image-outset attribute
Function: Specifies the border The amount by which the image exceeds the bounding box.
Syntax:
border-image-outset: length|number;
length: Indicates setting the distance between the border image (border-image) and the border, the default is 0.
number: represents a multiple of the corresponding border-width.
Description:
1. The border-image-outset attribute specifies the amount of the border image beyond the border box, including the upper, lower and left and right parts. If the fourth value is omitted, it is the same as the second value. If the third value is omitted, it is the same as the first value. If the second value is omitted, it is the same as the first value.
2. The border-image-outset attribute does not allow any negative value.
Usage example of CSS3 border-image-outset property
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
width: 600px;
margin: 100px auto;
border: 1px solid red;
}
p{
border:15px solid;
padding: 30px;
border-image:url(How to use CSS3 border-image-outset property?) 100 round;
border-image-outset: 1px 10px 8px;
}
</style>
</head>
<body>
<div class="box">
<p>PHP中文网</p>
</div>
</body>
</html>Rendering:
Without adding the border-image-outset attribute:
After adding the border-image-outset attribute:
The above is the detailed content of How to use CSS3 border-image-outset property?. For more information, please follow other related articles on the PHP Chinese website!