css3 border-image property


  Translation results：

border

UK[ˈbɔ:də(r)] US[ˈbɔ:rdə(r)]

n.Border; edge; edging; wrapping Edge

vt.& vi. Bound with, on the edge of...

vt. Along the edge of, surround..., edge...

vi. Approximate, adjacent

Third person singular: borders Plural: borders Present participle: bordering Past tense: bordered Past participle: bordered

image

英[ ˈɪmɪdʒ] 美[ˈɪmɪdʒ]

##n.Image; portrait; concept, intention; mirror image, image

vt.Reflection; imagination; image of; symbol

Third person singular: images Plural: images Present participle: imaging Past tense: imaged Past participle: imaged

css3 border-image propertysyntax

Function: Use pictures to create borders

Description: Composite attributes. Sets or retrieves the object's border style to fill with an image.

border-image is a shorthand property in CSS3, through which images can be used to create borders

css3 border-image propertyexample

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;	/* Old Firefox */
-webkit-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;	/* Safari and Chrome */
-o-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;		/* Opera */
border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;
}

#stretch
{
-moz-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;	/* Old Firefox */
-webkit-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;	/* Safari and Chrome */
-o-border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;	/* Opera */
border-image:url(http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;
}
</style>
</head>
<body>

<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>
<img src="http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg">

<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>

</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance

Popular Recommendations

Home

Videos

Q&A

submit