边框半径与背景无法正常工作

Question

我在Android 2.x浏览器上设置了Webview。我希望我的按钮具有border-radius和background-color。我在CSS中为两者指定了这些值，但它不起作用。

当我分别设置这些值时，它们可以正常工作。

有什么想法，为什么当我同时指定所有值时它就不起作用？ html

<button class="btn">click</button>

css

.btn{/*border radius does not work*/
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    background-color:green;
}

.btn{/*works*/
    border-radius:12px;
}

.btn{/*works*/
    background-color:green;
}

- Rach Chen

---

您提供的图片并没有反映出您的问题。很明显，您还有更多的代码，请提供与 .btn 类及其父类相关联的所有代码。 - Alex Ljamin

如果让我猜的话，我会说可能是CSS中有错误。缺失分号是其中一种可能性。只有一个属性的样式块不需要分号。 - Mr Lister

Answer 1

尝试包括 overflow hidden 和 display:block

overflow:hidden; display:block

- LIJIN SAMUEL

---

你能分享一个截屏吗？ - LIJIN SAMUEL

Answer 2

如CSS-tricks所述，这应该适用于任何 Android 版本，从 1.6 开始。

button{
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px; 
    border-radius: 12px; 
    background-color:green;
}

<button>click</button>

在HTML5和CSS3中设计按钮的另一个选项是使用a标签。就像这样：

a{
  background-color:green;
  text-decoration:none;
  -webkit-border-radius:12px; 
  -moz-border-radius:12px; 
  border-radius:12px;
  color:black;
  padding:5px;
  cursor:pointer;
}

<a href="/" alt="">click</a>

或者您可以尝试使用<input>标签，设置为type="button"或type="submit"。了解更多这里。示例如下：

input{
  background-color:green;
  -webkit-border-radius:12px;
  -moz-border-radius:12px; 
  border-radius:12px;
}

<input type="button" value="click">
<input type="submit" value="click">

如果这些方法对您无效，那么很有可能是其他CSS或JavaScript设置导致了这个问题。您需要在问题中包含额外的代码。

- Alex Ljamin