Home > Article > Web Front-end > How to set irregular borders in css
How to set irregular borders in css: First create an HTML sample file; then set irregular borders through the "border-image: url(border.png) 30 stretch;" attribute.
The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.
How to set irregular borders in css?
In CSS, you can set irregular borders through the border-image attribute. The border-image property lets you style the border using an image.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<p>border-image 属性用于指定一个元素的边框图像。</p>
<p id="borderimg1">在这里，图像平铺（重复），以填补该地区。</p>
<p id="borderimg2">在这里，图像被拉伸以填补该地区</p>
<p>这是原始图片:</p><img src="/images/border.png" alt="How to set irregular borders in css" >
</body>
</html>Rendering:
Recommended: "css video tutorial"
border-image attribute
Syntax
border-image: source slice width outset repeat|initial|inherit;
Attribute value:
border-image-source is used to specify the location of the image to be used to draw the border
border-image-slice The image border is offset inward
border-image-width The width of the image border
border-image-outset is used to specify drawing border-image- outside the border The amount of area
border-image-repeat is used to set whether the image border should be repeated (repeat), stretched (stretch) or covered (round).
The above is the detailed content of How to set irregular borders in css. For more information, please follow other related articles on the PHP Chinese website!