CSS透明边框

Question

我正在尝试制作透明边框。我尝试了 transparent 和 rgba.

.menu-item {
  display: block;
  width: 100%;
  list-style: none;
  text-align: left;
  line-height: 20px;
  font-size: 13px;
  padding: 5px 10px !important;
  margin: 0 !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 5px solid transparent !important; 
  //border-bottom:5px solid rgba(0,0,0,0);
  cursor: pointer;
  background: #1a1a1b;
  color: #ccc;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none !important;
}

<ul class="menu">
  <li class="menu-item">Disabled</li>
  <li class="menu-item">English</li>
  <li class="menu-item">German</li>
  <li class="menu-item">Spanish</li>
</ul>

Answer 1

您没有看到带有 rgba 的边框，因为您将 0 设置为 opacity 什么意思没有看到

请将rgba中的opacity:>0设置为白色使用(255,255,255,1)(opacity随意)

.menu-item {
  display: block;
  width: 100%;
  list-style: none;
  text-align: left;
  line-height: 20px;
  font-size: 13px;
  padding: 5px 10px;
  margin: 0 !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  //border-bottom: 5px solid transparent !important; 
  border-bottom:5px solid rgba(255,255,255, 0.9);
  cursor: pointer;
  background: #1a1a1b;
  color: #ccc;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

<ul class="menu">
  <li class="menu-item">Disabled</li>
  <li class="menu-item">English</li>
  <li class="menu-item">German</li>
  <li class="menu-item">Spanish</li>
</ul>

注意！

如果确实不需要，请不要使用 !important：https://css-tricks.com/when-using-important-is-the-right-choice/

Answer 2

只需使用边距而不是边框 - 您的边框是透明的，但您应用了背景以便显示出来。

还有一个小提示 - 当您无法覆盖某些插件的内联样式时，!important 应该作为最后的手段使用 - 如果您随意使用它，您的代码很快就会变得无法维护

.menu-item {
  display: block;
  width: 100%;
  list-style: none;
  text-align: left;
  line-height: 20px;
  font-size: 13px;
  padding: 5px 10px;
  margin: 0 0 5px 0;
  box-sizing: border-box;
  cursor: pointer;
  background: #1a1a1b;
  color: #ccc;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

<ul class="menu">
  <li class="menu-item">Disabled</li>
  <li class="menu-item">English</li>
  <li class="menu-item">German</li>
  <li class="menu-item">Spanish</li>
</ul>

Answer 3

.menu-item {
  display: block;
  width: 100%;
  list-style: none;
  text-align: left;
  line-height: 20px;
  font-size: 13px;
  padding: 5px 10px !important;
  margin: 0 !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  border-bottom:5px solid white;
  cursor: pointer;
  background: #1a1a1b;
  color: #ccc;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none !important;
}

试试这个

Answer 4

您需要更改 background-clip 以避免背景延伸到您的边框：

.menu-item {
  display: block;
  width: 100%;
  list-style: none;
  text-align: left;
  line-height: 20px;
  font-size: 13px;
  padding: 5px 10px !important;
  box-sizing: border-box;
  border-bottom: 5px solid transparent;
  cursor: pointer;
  background: #1a1a1b;
  background-clip:padding-box; /* add this*/
  color: #ccc;
}

<ul class="menu">
  <li class="menu-item">Disabled</li>
  <li class="menu-item">English</li>
  <li class="menu-item">German</li>
  <li class="menu-item">Spanish</li>
</ul>

Answer 5

如果你想要 border-bottom 你可以使用下面的代码：

.menu-item {
  display: block;
  width: 100%;
  list-style: none;
  text-align: left;
  line-height: 20px;
  font-size: 13px;
  padding: 5px 10px !important;
  margin: 0 !important;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 5px solid #fff !important; 
  /* bottom:5px solid rgba(0,0,0,0); */
  cursor: pointer;
  background: #1a1a1b;
  }

然而，您可以通过简单地使用

来实现相同的目的

margin-bottom:5px;

并删除： margin:0 重要；

https://jsfiddle.net/u0macpe4/14/

CSS透明边框

CSS transparent border

html

css

border