来自图像的自定义 html 边框答案

【问题标题】：Custom html borders from image来自图像的自定义 html 边框
【发布时间】：2012-03-16 14:02:12
【问题描述】：

是否可以从我创建的图像为 html 表格创建自定义边框？我正在使用 adobe 烟花，并想用他们的一把刷子作为我的桌子边框。到目前为止，我只找到了如何使用预设边框，如下所示：

<STYLE type="text/css">
.table{
    border-style:outset;
    border-color: red;
    border-width:10px;
      }
</style>

我想创建自己的，而不是使用边框样式：一开始。上面的代码是基于This website的代码

【问题讨论】：

标签： html css image styles border

【解决方案1】：

跨浏览器的支持不是很好，但你应该看看css3属性border-image：

-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;

IE 在这里是个奇怪的人，但除此之外它应该可以正常工作。这里有一篇好文章：http://www.css3.info/preview/border-image/

【讨论】：

【解决方案2】：

CSS3 支持图片边框：http://www.norabrowndesign.com/css-experiments/border-image-anim.html 但浏览器对 IE 的支持很差http://caniuse.com/#feat=border-image

【讨论】：