Html 底部边框为圆形的按钮

我想知道是否可以创建如下所示的按钮：

与CSS只有没有额外的图像

你觉得怎么样？

来自：

是的，可以使用方框阴影。该示例使用锚定标记，但也可以很容易地调整为按钮

a{ 背景：米色； 边界半径：4px； 文字装饰：无； 显示：块； 填充：4px； 宽度：100px； 文本对齐：居中； 颜色：黑色； -网箱阴影：0px 3px 1px栗色； -莫兹盒阴影：0px 3px 1px栗色； 盒影：0px 3px 1px褐红色； }

---

不确定为什么每个人都建议使用长方体阴影，您可以仅使用边界半径和底部边界：

身体{ 背景：2000人； } 钮扣{ 背景：B6B694；/*猜猜，你可以自己找到实际的颜色*/ 边界：无； 边框底部：2px实心f00； 边界半径：5px； 显示：内联块； 字体大小：14px； 填充：10px 14px； 文本对齐：左对齐； 宽度：150px； } 文本悬停 您希望确保radius在每个浏览器中都有效，因此请使用此代码使radius在所有浏览器中都有效。

自己尝试

border-radius:20px;

-moz-box-shadow:    3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
 box-shadow:         3px 3px 5px 6px #ccc;

---

您应该发布到目前为止尝试的代码。无论如何，试试这个

身体{ 背景色：333； 文本对齐：居中； 填充顶部：20px； } 钮扣{ 背景：米色； 边界半径：3px； 盒影：0px 5px 0px褐红色； 边界：0； 颜色：333； 字号：17px； 填充：10px 30px； 显示：内联块； 大纲：0； } 按钮：悬停{ 背景：eaeab4； 盒影：0px 5px 0px 4d0000； } 按钮：激活{ 盒影：无； 边缘顶部：5px； }

---

Text hover非常正确，但建议使用框阴影，以防用户以后需要添加实际边框。不要忘记使用“outline:none；”单击时删除“边框/轮廓”。@Nick OP没有指定他们不希望发生这种情况。@JamesDonnelly有些浏览器在单击时会给出一个轮廓，它看起来像一个1px的点边框，但不是边框@尼克，我很清楚这一点。但是OP并没有指定这是不需要的。是的，或者边框：@web tiki:Yep mate。Border也是一个很好的选项，事实上，对于所讨论的形状来说，它更简单，但正如我在另一个答案的评论中所指出的，我觉得如果将来还需要添加一个单独的边框，那么基于方框阴影的示例会给OP带来更多的优势。实际上，没有必要继续使用前缀版本。例如，Firefox的上一个不支持BorderRadius的版本是3.6版。Firefox现在的版本是33。请参阅：。但对于safariSafari版本4，您仍然需要webkit边界半径，当然。Safari已经有4年没有在Windows上更新了，甚至在5.1版上也没有更新过。你还需要Tizen的webkit命令。Tizen是三星的操作系统，使用Android浏览器，自2.2版起就支持这一点，现在是4.4版。只需将问题发布到谷歌上，就可以找到更准确的结果。

.example    {
    moz-border-radius:20px; 
    webkit-border-radius:20px;
    border-radius:20px;
}

border-radius:20px;

-moz-box-shadow:    3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
 box-shadow:         3px 3px 5px 6px #ccc;