css3 边框导入图片

最新推荐文章于 2021-08-04 00:41:04 发布

LXY_liuxingyao

最新推荐文章于 2021-08-04 00:41:04 发布

阅读量326

点赞数

本文链接：https://blog.csdn.net/LXY_liuxingyao/article/details/102970925

版权

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

#round
{
-moz-border-image:url(/i/border.png) 30 30 round;   /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;   /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;       /* Opera */
border-image:url(/i/border.png) 20 20 round; 边框数量
}

#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;   /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;   /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;   /* Opera */
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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LXY_liuxingyao

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 边框导入图片

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

扫一扫