CSS: div的透明边框

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

如果您使用填充而不是边框，您可能会有更一致的UX。

​

.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 2

将.边框透明的css更新为下面的属性。

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

背景剪辑定义了背景在元素中的扩展范围。因此，背景格式只在元素的填充范围内扩展，相应的边框属性不会受到影响。

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>

​