使div边框透明html的一部分

Question

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

如果没有,您可以建议什么方法？

我的想法[非常糟糕]是在canvas元素中绘制边框并将其放置在div元素上(canvas body is trasparent).

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

Answer 2

以下是两种可能的方法：

两种方法中的要求HTML保持相同，如下所示：

HTML：

<div class="box"></div>

方法#01：

1. 使用 css 属性绘制上、右、左边框border。
2. 使用 css 属性绘制底部透明边框linear-gradient。

CSS：

.box {
  /* Following css will create bottom border */
  background: linear-gradient(to right, #000 30%, transparent 30%, transparent 70%, black 70%) no-repeat;
  background-size: 100% 8px;
  background-position: 0 100%;

  /* Following css will create top, left and right borders */
  border: solid #000;
  border-width: 8px 8px 0;

  width: 100px;
  height: 50px;
}

<div class="box"></div>

.box {
  /* Following css will create bottom border */
  background: linear-gradient(to right, #000 30%, transparent 30%, transparent 70%, black 70%) no-repeat;
  background-size: 100% 8px;
  background-position: 0 100%;

  /* Following css will create top, left and right borders */
  border: solid #000;
  border-width: 8px 8px 0;

  width: 100px;
  height: 50px;
}

方法#02：

1. 使用 css 属性绘制上、右、左边框border。
2. :before用和伪元素绘制底部边框:after。

CSS：

.box {
  /* Following css will create top, left and right borders */
  border: solid black;
  border-width: 8px 8px 0;

  position: relative;
  overflow: hidden;
  width: 100px;
  height: 50px;
}

/* Following css will create bottom border */
.box:before,
.box:after {
  position: absolute;
  background: #000;
  content: '';
  height: 8px;
  width: 30%;
  bottom: 0;
  left: 0;
}

.box:after {
  left: auto;
  right: 0;
}

html,
body {
  height: 100%;
}
body {
  background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
  margin: 0;
}
.box {
  background: linear-gradient(to right, #000 30%, transparent 30%, transparent 70%, black 70%) no-repeat;
  background-size: 100% 8px;
  background-position: 0 100%;
  border: solid #000;
  border-width: 8px 8px 0;
  margin: 20px 15px;
  width: 100px;
  height: 50px;
}

<div class="box"></div>