代码之家 › 专栏 › 技术社区 › Toniq

CSS透明边框

border css html

-1

Toniq · 技术社区 · 7 年前

我正在努力使边界透明。我试过了 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>

5 回复 | 直到 7 年前

Imran Rafiq Rather 7 年前

margin-bottom:5px;

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

Pete Irfan TahirKheli 7 年前

!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>

Temani Afif 7 年前

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>

××× × ×××× 7 年前

rgba 0 opacity

opacity:>0 (255,255,255,1)

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

-1

Coder Girl 7 年前

.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;
}