以下是一个示例代码,展示了如何为按钮下方和右侧添加线条:
HTML代码:
CSS代码:
.container {
position: relative;
}
.my-button {
padding: 10px;
margin-bottom: 10px;
}
.line-horizontal {
position: absolute;
width: 100%;
height: 1px;
background-color: black;
bottom: 0;
}
.line-vertical {
position: absolute;
width: 1px;
height: calc(100% - 10px);
background-color: black;
top: 10px;
right: 0;
}
在上面的代码中,我们首先创建了一个容器(.container
)来包含按钮和线条。按钮使用了一个自定义的类(.my-button
),并设置了一些样式,比如内边距和底部边距。
接下来,我们添加了两个线条,一个水平线条(.line-horizontal
)和一个垂直线条(.line-vertical
)。这两个线条都使用了绝对定位(position: absolute;
)来相对于容器定位。
水平线条的宽度设置为100%(width: 100%;
),高度为1像素(height: 1px;
),背景颜色为黑色(background-color: black;
),并且位于容器的底部(bottom: 0;
)。
垂直线条的宽度设置为1像素(width: 1px;
),高度设置为容器高度减去按钮的高度和底部边距(height: calc(100% - 10px);
),背景颜色为黑色(background-color: black;
),并且位于容器的顶部(top: 10px;
)和右侧(right: 0;
)。
这样,按钮下方和右侧就会显示出线条。你可以根据需要调整线条的样式和位置。
上一篇:按钮无响应 JavaFx
下一篇:按钮下拉功能