html - 使用 HTML5 让视图模仿下面的图像

Question

我想获得如图所示的按钮样式，所以我需要知道如何使用 HTML5 和 CSS 获得这些类型的按钮。

Answer 1

您可以使用div通过 CSS边框半径属性设置样式的常规元素，您可以将半径应用于每个div. 然后，您可以将CSS 渐变应用到背景。

Answer 2

HTML

<div class="wrap">
    <div class="topLeft"></div>
    <div class="topRight"></div>
    <div class="botLeft"></div>
    <div class="botRight"></div>
</div>​

CSS

.wrap {width: 515px; padding: 20px; margin: auto;}
.wrap div {width: 150px; height: 150px; background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    display: inline-block; border: 1px solid #ccc;}

div.topLeft {border-radius: 50px 15px 15px 15px;}
div.topRight {border-radius: 15px 50px 15px 15px;}
div.botLeft {border-radius: 15px 15px 15px 50px;}
div.botRight {border-radius: 15px 15px 50px 15px;}​

截屏

小提琴：http: //jsfiddle.net/fBTxw/1/