javascript - 我需要一个 div 框的自定义边框。有哪些应用方法？

Question

问题在于 div 框的尺寸及其位置将通过 JavaScript 动态更改，并且框本身必须 100% 透明。

看图就明白我的意思了。据我所知，没有什么可以通过纯 CSS 完成的，对吗？

也许您知道一些可以帮助我解决问题的技巧(除了周边有四个盒子或嵌套盒子时)？

http://savepic.org/85113.png

Answer 1

是的，如果缺少 CSS 3 中的高级多背景图像和/或边框图像，您需要一些嵌套的 div。

也许是这样的:

<style type="text/css">
.box-1-top,
.box-1-bottom{height: 5px; font-size: 0;/* Make height work in IE */ background: url(box-1-background.gif) left top repeat-x;}

.box-1-left{padding-left: 5px; background: url(box-1-background.gif) left top repeat-y;}
.box-1-right{padding-right: 5px; background: url(box-1-background.gif) right top repeat-y;}
</style>

<div class="box-1">
    <div class="box-1-top"></div>
    <div class="box-1-left">
        <div class="box-1-right">
            Box content here
        </div>
    </div>
    <div class="box-1-bottom"></div>
</div>