我正在尝试制作透明边框。我尝试了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>
答案 0 :(得分: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>
答案 1 :(得分:2)
您需要更改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>
答案 2 :(得分:1)
如果您希望使用边框底线,则可以使用以下代码:
.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!重要;
答案 3 :(得分:0)
您没有看到$conn = New-Object System.Data.SqlClient.SqlConnection
$conn.ConnectionString = "Server=devsrv01;Database=TestDB;Integrated
Security=SSPI;"
$conn.open()
$cmd = New-Object System.Data.SqlClient.SqlCommand
$cmd.connection = $conn
$cmd.commandtext = "INSERT INTO u_servicepreferences2
(productversion,fileversion,filename) VALUES()
(Missing section here)
$cmd.executenonquery()
$conn.close()
的边界,因为您将rgba
设置为0
意味着看不见
请在opacity
中将opacity:>0
设置为白色,并使用rgba
(根据需要选择(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>
:https://css-tricks.com/when-using-important-is-the-right-choice/
答案 4 :(得分:-1)
.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;
}
尝试