Question

在FF中，此边框半径似乎不想工作。 Editable链接到此处。

大框的右半径应为0px，小框的左边应为0以加入它们。

HTML：

<fieldset class="error">
    <input id="product__79_specField_8" name="specField_8" class="text " autocomplete="" type="text" value=""/>
    <input type="image" src="upload/orng_bg_arrow"upload/id="product__specfield_8_arrow" value=""></input>
    <div class="errorText hidden"></div>
</fieldset>

CSS

#product__79_specField_8,
#product___specField_8 {
    background-color:#ffa105;
    width:194px;
    height:33px;
    border: 1px solid #dddddd;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-right-radius:0px;
    border-top-right-radius:0px;
    -moz-border-bottom-right-radius:0px;
    -moz-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -webkit-border-top-right-radius:0px;
    font-weight:bold;
    font-size:24px;
    padding-left:55px;
    float:left;
}

#product__specfield_8_arrow {
    background-color:#ffa105;
    width:50px;
    height:33px;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-bottom-left-radius:0px;
    -moz-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
}

Answer 1

不幸的是，CSS属性的形式因webkit和mozilla而异。

对于Firefox，您需要：

-moz-border-radius-bottomright:
-moz-border-radius-bottomleft:
-moz-border-radius-topright:
-moz-border-radius-topleft:

对于Safari＆amp;你想要的Chrome：

-webkit-border-top-left-radius:    
-webkit-border-top-right-radius:
-webkit-border-bottom-left-radius:
-webkit-border-bottom-right-radius:

你似乎有：

-moz-border-bottom-right-radius:0px;
-moz-border-top-right-radius:0px;

无效。

Answer 2

-moz-border-radius-topright: 0px

http://www.css3.info/preview/rounded-border/

Answer 3

您的声明有点偏，mozilla样式应该是这样的：

#product___specField_8 {
  -moz-border-radius-bottomright:0px;
  -moz-border-radius-topright:0px;
}

#product__specfield_8_arrow {
  -moz-border-radius-topleft:0px;
  -moz-border-radius-bottomleft:0px
}

For a good equality comparison across all 3, look here

Answer 4

<强>解决方案：

-moz-border-radius:5px 10px 150 20px;
-webkit-border-radius:5px 10px 150 20px;
border-radius:5px 10px 150 20px;

下面，
5px用于左上角，
10px用于右上角，
15px用于右下角，
20px用于左下角。

边界半径行为不端

4 个答案: