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

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>

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>

Html相关问答推荐

Angular 分量被循环

R-markdown中的非顺序列表

我无法使用背景图像css，因为我在VS代码中将照片放在不同的文件夹中

覆盖垫子中的边框底部 Select

每个元素的CSS网格高度相等，以保持响应性

如何用等宽字体固定数字在有序列表中的位置

<nav和button是姐妹元素.当添加了导航活动类时，我如何为按钮编写CSS？

如何在R rmarkdown中创建循环中的分页表？

高度：适合-内容不拉伸以适合内部长度

为什么 Select 元素在带有数据绑定的Blazor上行为怪异？

为什么字体大小而不是 colored颜色 属性适用于元素？

仅 Select 悬停的级别，而不 Select 其父级或子级

如何使活动选项卡背景作为父背景图像

带标签 css 的 div 内的中心图标

如何创建淡出研磨背景

CSS "overflow"不能显示整个单词

获取链接到功能的网页表单

BeautifulSoup用名称列表的findall无法找到另一个目标后面的目标

在带有换行文本的工具提示中显示溢出文本

SVG 适用于 Safari，不适用于 Chrome