Question

我是一名iOS和3D开发人员参与一些Web开发工作。在HTML / CSS / JS中，我发现不可能做一些我认为是微不足道的事情：在按钮上放置一条水平线。

这是我的带有背景图片的按钮：

<button id="myButton" style="background-image: url(assets/cursor-filter-thumbnail.png);" class="igv-filter-button" data-toggle="modal" data-target="#myDataTarget">
</button>

这是CSS：

.igv-filter-button {
    position: absolute;
    width: 128px;
    border:none;
    padding: 0;
    height: 100%;
    background: none;
}

现在我想在此按钮上放置一条水平线，我将使用JS以编程方式向上/向下移动。有人可以开导我吗？

Answer 1

1）在按钮周围放置一个容器，如下所示

<span class='linestyle'>
<button id="myButton" style="background-image: url(assets/cursor-filter-  
thumbnail.png);" class="igv-filter-button" data-toggle="modal"   
data-target="#myDataTarget">
</button>
<span>

2）将css样式border-top添加到span容器

 .linestyle { border-top:1px solid black;}

3）在按钮上添加填充顶部。

.igv-filter-button    { padding-top:1px;}

4）以编程方式调整按钮的填充。

Answer 2

您可以使用box-shadow创建所需的效果，甚至可以为其设置动画，但父元素背景颜色必须是实心的。

<强> CSS：

button{
    border:none;
    box-shadow:0 -5px 0 white, 0 -6px 0 rgba(0,0,0,0.5);
}

JSFiddle Demo using CSS transition and jQuery to animate the line position.

HTML + CSS。如何在按钮顶部放置水平线？

2 个答案: