Edge 创建了完美的内嵌边框,但起始边框是错误的。
图片在这里:https://i.stack.imgur.com/k1osq.jpg
这两张图片之间的唯一代码更改是从开始更改为内陷。 为什么颜色不完全相同而是交换的?
.SmallButton {
color: grey;
font-family: "Segoe UI";
font-weight: bold;
background-color: white;
font-size: 15px;
border-radius: 30px;
border-style: inset;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
margin-top: 20px !important;
width: 230px !important;
height: 36px !important;
}
<input class="SmallButton" type="submit" value="Sign Up">
浏览器有时在如何显示某些 UI 元素方面具有略有不同的方法。最好通过应用特定的 CSS 属性来手动设置它们的样式。
您可以将border-style
更改为实心,并为每条边应用border-color
以获得首选结果。
.button {
background-color: #FFFFFF;
border-radius: 18px;
border-style: solid;
border-width: 2px;
color: #808080;
cursor: pointer;
font-size: 15px;
font-weight: bold;
height: 36px;
max-width: 230px;
width: 100%;
}
.button-outset {
border-color: #F0F0F0 #A0A0A0 #A0A0A0 #F0F0F0;
}
.button-inset {
border-color: #A0A0A0 #F0F0F0 #F0F0F0 #A0A0A0;
}
<input type="submit" class="button button-outset" value="Outset button">
<br><br>
<input type="submit" class="button button-inset" value="Inset button">