有一个带边框的按钮:3px solid #E82929;什么技术可以用来添加像照片中的额外线条?
.btn {
position: relative;
width: 362px;
height: 71px;
color: #FFFFFF;
background-color: #000000;
border: 3px solid #E82929;
font-family: 'Flamenco';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 25px;
text-align: center;
}
<button class="btn">Забронировать столик</button>
最佳答案
使用渐变
.btn {
position: relative;
padding: 20px 50px;
color: #FFFFFF;
border: 3px solid #E82929;
font-family: 'Flamenco';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 25px;
text-align: center;
background: linear-gradient(90deg, #E82929 40px,#0000 0 calc(100% - 40px), #E82929 0) 50%/100% 3px no-repeat;
background-color: #000000;
}
<button class="btn">Забронировать столик</button>
关于html - 如何在按钮的中心添加两条线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72155675/