欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css border-image 边框图片

程序员文章站 2022-05-26 23:29:20
...

border-image

复合属性。设置或检索对象的边框样式使用图像来填充。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
border-image:url(/i/border.png) 30 30 round;
}

#stretch
{
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>

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

<p>这是我们使用的图片:</p>
<img src="/i/border.png">

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

</body>
</html>

css border-image 边框图片

border-image-source

用在边框的图片的路径。	

border-image-slice

图片边框向内偏移。	

border-image-width

图片边框的宽度。	

border-image-outset

边框图像区域超出边框的量。

border-image-repeat

图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
相关标签: css