html - 使部分div边框透明html

Question

我可以使 div 边框的一部分(从 x1 到 x2)透明吗？

如果不是，您可以建议什么方法？

我的想法[非常糟糕]是在 Canvas 元素中绘制边框并将其( Canvas 主体是透明的)放在 div 元素上。

Answer 1

由于 DIV 只有 4 个元素(顶部、底部、左侧、右侧)，因此您不能使边框的一部分透明 AFAIK。

但是，您可以创建覆盖您的 div 的元素，并使用相对定位来构建您喜欢的边框。例如:

<style>
 .multiborder{
        border:1px solid black;
        border-top:none;
        width:500px;
        height:100px;
        position:relative;
    }
    .top-border-1{
        border-top:2px solid red;
        width:100px;
        position:absolute;
        top:0px;
        right:0px;
    }
    .top-border-2{
        border-top:3px double blue;
        width:300px;
        position:absolute;
        top:0px;
        left:0px;
    }
</style>
<div class="multiborder">
    <div class="top-border-1"></div>
    <div class="top-border-2"></div>
</div>

您可以在 http://jsfiddle.net/Bekqu/3/ 查看结果.