使div边框透明html的一部分 [英] make part of div border transparent html

问题描述

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

Can I make part (from x1 to x2) of div border transparent?

如果不能，您可以建议什么方法?

If not what approach can you advice?

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

My idea [very bad] is to draw border in canvas element and place it (canvas body is trasparent) over div element.

推荐答案

由于DIV仅包含4个元素(顶部，底部，左侧，右侧)，因此您不能将其作为边框透明AFAIK的一部分.

Since DIVs have only 4 elements (top, bottom, left, right) you can't make part of a border transparent AFAIK.

但是，您可以创建覆盖div的元素，并使用相对位置来构建符合您品味的边界.例如:

However, you could create elements that would overlay your div and use relative positioning to build a border to your taste. For example:

<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/上查看结果.

You can see the result at http://jsfiddle.net/Bekqu/3/.

这篇关于使div边框透明html的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！