使用 rgba() 的 css 中的边框不透明度不起作用

Question

我正在使用 html 和 css（还没有 js）开发一个简单的登录站点模板，并且出于某种原因，当我在 .main 类的 css 中使用 border-color 属性时，我使用 rgba() 函数，如下所示： border-color: rgba(255, 255, 255, 0.5); rgb 工作但 alpha 根本不工作。

我试着这样做，我也删除了原来的行： border: 60px solid rgba(255, 255, 255, 0.5);

我使用的是 chrome 108 版本。

html {
  height: 100%;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-image: linear-gradient(red, lime);
}

.main {
  margin: 60px;
  border: 60px solid;
  border-color: rgba(255, 255, 255, 0.5) !important;
  /* Set border opacity */
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.8);
}

.main input {
  border-radius: 10px;
  height: 30px;
  background-color: lightgray;
}

.main input:focus {
  background-color: white;
}

.main button {
  height: 30px;
  border-radius: 15px;
}

<center>
  <div class="main">
    <h1>Login</h1>
    <p>Hello! To continue please log into our service:</p>
    <h2>Email</h2>
    <input type="email">
    <h2>Password</h2>
    <input type="password">
    <br>
    <br>
    <button type="button" onclick='alert("logging in...")'>Login</button>
  </div>
</center>

Answer 1

我看了一下，没有问题。 您创建了两种非常相似且不透明度为 50% 或更高的样式：

border-color: rgba(255, 255, 255, 0.5)
background-color: rgba(255, 255, 255, 0.8)

我建议你在 .main 背景和边框之间创建一个很好的对比。

在前端，你也需要学习设计。因此，我建议您学习如何管理颜色的视频之一是：https://youtu.be/Qj1FK8n7WgY?list=PLAiIx7LPQuH3FN2B2oBNiWhPCBC2NdqDe

我相信背景和边框之间更好的对比度，以及低于 50% 的不透明度将解决您的问题。

Answer 2

您需要添加 background-clip: padding-box; 以将背景限制在填充区域，而不是在您的边框颜色下：

html {
  height: 100%;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-image: linear-gradient(red, lime);
}

.main {
  margin: 60px;
  border: 60px solid;
  border-color: rgba(255, 255, 255, 0.5);
  /* Set border opacity */
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  background-clip: padding-box
}

.main input {
  border-radius: 10px;
  height: 30px;
  background-color: lightgray;
}

.main input:focus {
  background-color: white;
}

.main button {
  height: 30px;
  border-radius: 15px;
}

<div class="main">
    <h1>Login</h1>
    <p>Hello! To continue please log into our service:</p>
    <h2>Email</h2>
    <input type="email">
    <h2>Password</h2>
    <input type="password">
    <br>
    <br>
    <button type="button" onclick='alert("logging in...")'>Login</button>
  </div>