Question

我想复制此透明边框：

我发现了另一个问题：

How to make a transparent border using CSS?

并尝试遵循那里的答案。

在我的CSS中，我已经尝试过：

.border-6 {
    border-width:6px !important;
}


.border-transparent {
    border: 5px solid rgba(255, 255, 255, .5) !important;
}


.bgwhite {
  background-color: white;
}

但是它不起作用：

HTML：

<div class="border-transparent col-md-6 rounded border-6 bgwhite">

                    <div class="m-5">

                        <div class="row">
                            <form action="/post_url_tamanioscantidades/" method="post">
                                {% csrf_token %}
                                {{ tamanioscantidades_form.as_p }}
                                <input type="submit" value="Submit"/>
                            </form>

                        </div>

                    </div>

更新1：

基于第一个答案，我现在有：

CSS ：

.border-6 {
    border-width:6px !important;
    /*border-color: rgba(60, 60, 60, 0.5) !important;*/
}


.border-transparent {
    border: 5px solid rgba(255, 255, 255, .5) !important;
}

.bgred {
  background-color: red;
}

我看到的边框是浅红色，但不透明，正如我期望的那样：

Answer 1

将您的.border透明CSS更新为以下属性。

border: 5px solid rgba(255, 0, 0, 0.5);
background-clip: padding-box;

Background-clip定义背景在元素内应延伸的距离。因此，背景格式仅在元素的填充范围内扩展，并且相应的border属性不会受到影响。

Answer 2

如果您使用填充而不是边框，则可能会有更一致的用户体验

.semi-transparent {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .padded {
    padding: 6px;
    padding: .5rem;
  }
  .bg-white {
    background-color: #FFFFFF;
  }
  .rounded {
    border-radius: 3px;
    border-radius: .25rem;
  }

<div class="semi-transparent padded rounded">
  <div class="bg-white rounded padded">
    Your Content
  </div>
<div>

Answer 3

不要在同一容器中设置背景和边框，请将边框放在外部

body{
  background-image: url(https://i.postimg.cc/DzC89QBc/164188940-cubes-wallpapers.jpg)
}


.border-transparent {
	border: 15px solid rgba(255, 255, 255, 0.3) !important;
}

.bgred {
  background-color: red;
}

<div class="border-transparent">

  <div class="m-5 bgred">

    <div class="row">
      <form action="/post_url_tamanioscantidades/" method="post">
        <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium nisl velit, et egestas arcu finibus non. Vestibulum varius suscipit venenatis. Fusce porttitor, nisi id finibus imperdiet, nibh neque blandit nibh, at cursus felis tellus quis nulla. Nullam nec sodales ipsum. Vestibulum eget velit nulla. Proin libero magna, lacinia at nibh ut, tristique iaculis sem.
        </span>
        <input type="submit" value="Submit" />
      </form>

    </div>

  </div>

Answer 4

您可以使用box-shadow。

body {
  background: url(https://unsplash.it/200);
}

div {
  box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.5);
  border-radius: 2px;
  
  /* for demo */
  background: red;
  padding: 1em;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50vmax;
  height: 50vmax;
  margin: auto;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium esse unde tenetur recusandae commodi soluta aut, illo error vel. Sequi eos, iste aliquid reiciendis eius inventore aspernatur hic nostrum recusandae.</p>
</div>

Answer 5

问题是，如果将bgwhite更改为bgrwhite或其他颜色，则背景颜色为白色，rgba(255, 255, 255, .5)仍为白色。您可以看到边框。

或者像第一个示例一样，将rbga(255, 255, 255, .5)更改为rbga(155, 155, 155, .5)

CSS：div的透明边框

5 个答案: