Question

我已经以网格格式创建了按钮，按钮和图标都根据需要显示，但按钮是带有圆角的机器人。如何获得以下代码的圆角按钮。

   <fieldset  class="ui-grid-a">
         <div class="ui-block-a">
            <a href="#" id="SMS" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-sms ui-nodisc-icon" onClick='goToSms()'>Send SMS</a>
        </div>
         <div class="ui-block-b">
         <a href="#" id="EMAIL" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-mail ui-nodisc-icon" onClick='gomail()'>Send Email</a>
        </div>
    </fieldset >

CSS：

.ui-sms:after {
            background-image: url(icons/sms-b.png);
            background-size: 20px 20px;
            }
             .ui-mail:after {
            background-image: url(icons/mail-b.png);
            background-size: 15px 15px;
            }

Answer 1

使用border-radius css属性

    .ui-sms{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    }

    .ui-mail{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    }

DEMO here

Answer 2

<div class="ui-block-a">
    <a href="#" id="SMS" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-sms ui-nodisc-icon" onClick='goToSms()'>Send SMS</a>
</div>

<div class="ui-block-b">
    <a href="#" id="EMAIL" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-mail ui-nodisc-icon" onClick='gomail()'>Send Email</a>
</div>

CSS

.ui-block-a{
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

网格中的圆角按钮问题？

2 个答案: