Question

我想制作一个css ubuntu样式按钮，但是我遇到了边框半径值的问题，而且我想要使按钮圆滑 as showed in the image here

我的HTML


    <button>Ubuntu button</button>

我的CSS

button {

border-radius: 4em 4em / 6em;   /* Border radios problem */
font-size: 14px;
color: #6d6d6d;
width: 133px;
height: 34px;
background: #ffffff;
display: block;
border: 0.1em solid rgba(0, 0, 0, 0.25);
font-family: Ubuntu;
background-color: #f8f8f8;
outline: none;
cursor: pointer;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(255, 255, 255)),color-stop(1, rgb(240, 240, 240)));
background-image: -webkit-repeating-linear-gradient(top,rgb(255, 255, 255) 0%,rgb(240, 240, 240) 100%);
background-image: repeating-linear-gradient(to bottom,rgb(255, 255, 255) 0%,rgb(240, 240, 240) 100%);
background-image: -ms-repeating-linear-gradient(top,rgb(255, 255, 255) 0%,rgb(240, 240, 240) 100%);


}
button:hover {

-webkit-box-shadow: 0px 1px 1px 0px rgb(234, 234, 234);
-moz-box-shadow: 0px 1px 1px 0px rgb(234, 234, 234);
box-shadow: 0px 1px 1px 0px rgb(234, 234, 234);


}
button:active {

-webkit-box-shadow: 0px 1px 1px 0px rgb(234, 234, 234);
-moz-box-shadow: 0px 1px 1px 0px rgb(234, 234, 234);
box-shadow: 0px 1px 1px 0px rgb(234, 234, 234);
background-color: #ededed;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(231, 231, 231)),color-stop(0.496, rgb(231, 231, 231)),color-stop(0.5, rgb(231, 231, 231)),color-stop(1, rgb(255, 255, 255)));
background-image: -webkit-repeating-linear-gradient(top,rgb(231, 231, 231) 0%,rgb(231, 231, 231) 49.6%,rgb(231, 231, 231) 50%,rgb(255, 255, 255) 100%);
background-image: repeating-linear-gradient(to bottom,rgb(231, 231, 231) 0%,rgb(231, 231, 231) 49.6%,rgb(231, 231, 231) 50%,rgb(255, 255, 255) 100%);
background-image: -ms-repeating-linear-gradient(top,rgb(231, 231, 231) 0%,rgb(231, 231, 231) 49.6%,rgb(231, 231, 231) 50%,rgb(255, 255, 255) 100%);


}

更新

它在此图片中清晰显示http://i.imgur.com/ApkdTHG.png 顶部按钮是css样式，第二个是ubuntu系统按钮，你会看到，角半径不一样

Answer 1

对边界半径使用px值对于边界半径值比ems更精细和可靠。 Ems与其父容器相关，并且可能在较大的应用程序上存在问题。我认为您可以根据自己的喜好找到border-radius的4px值。

Ubuntu按钮css边框半径

更新

1 个答案: