css - Ubuntu 按钮 css 边框半径

Question

我想制作一个 css ubuntu 风格的按钮，但我遇到了边框半径值的问题，我想使按钮变圆 as showed in the image here

我的HTML

    <button>Ubuntu button</button>

And my 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%);
}按钮:悬停 {
 
-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);
}按钮:事件{
 
-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 系统按钮，如您所见， Angular 半径不一样

Answer 1

使用 px 值作为 border-radius 比 ems 对于边界半径值更细化和更可靠。 Ems 是相对于它们的父容器的，并且在较大的应用程序中可能会出现问题。我认为您会发现 border-radius 的 4px 值更符合您的喜好。