如何获得＆QUOT;旧式＆QUOT;在新的j​​Query Mobile的圆润的3D按钮1.4+ [英] How to get "old-style" rounded 3d buttons in newer jQuery Mobile 1.4+

问题描述

好吧，basicly我试图让这个按钮

＆LT; A HREF =＃类=UI-BTN UI图标检查UI的BTN-图标右UI的BTN-角所有的UI阴影＆GT;按钮＆LT; / A＆GT;

是这样的： http://jsfiddle.net/waYg8/2/

但我错过了几个班，尤其是眩光切口寻找风格。任何想法？

更新：试图增加自己的类，但看起来丑陋的2D ... 的http：/ /jsfiddle.net/2qt9w/

  .btn_round
{
-moz-的box-shadow：0像素1px的0 RGBA（255,255,255,0.3）;
-webkit-的box-shadow：0像素1px的0 RGBA（255,255,255,0.3）;
的box-shadow：0像素1px的0 RGBA（255,255,255,0.3）;-moz-边界半径：1.5em重要;！
-webkit-边界半径：1.5em重要;！
边界半径：1.5em重要;
}
 

解决方案

这是很难得到确切的样子，因为JQM 1.4不再添加按钮内的所有内部跨度，但这应该让你接近：

  .btn_round
{
    -moz-的box-shadow：0像素1px的0 RGBA（255,255,255,0.3）;
    -webkit-的box-shadow：0像素1px的0 RGBA（255,255,255,0.3）;
    的box-shadow：0像素1px的0 RGBA（255,255,255,0.3）;    -moz-边界半径：1.5em重要;！
    -webkit-边界半径：1.5em重要;！
    边界半径：1.5em重要;
    背景图片：线性渐变（RGB（68，68，68），RGB（45，45，45））;
    背景由来：填充盒;
    背景大小：汽车;
    边框颜色：RGB（17，17，17）;
    箱阴影：RGBA（255，255，255，0.298039）0像素1px的0像素0像素;
    文字阴影：RGB（17，17，17）0像素1px的1px的;
}
.btn_round：{后
    -webkit-箱阴影：RGBA（255，255，255，0.4）0像素1px的0像素0像素;
    箱阴影：RGBA（255，255，255，0.4）0像素1px的0像素0像素;
}
 

  

更新 FIDDLE

Well, basicly i'm trying to make this button

<a href="#" class="ui-btn ui-icon-check ui-btn-icon-right ui-btn-corner-all ui-shadow"> button </a>

Look like this: http://jsfiddle.net/waYg8/2/

But I'm missing a few classes, especially the glare-cut-out looking style. Any ideas?

UPDATE: Trying to add own class, but looks 2d ugly... http://jsfiddle.net/2qt9w/

.btn_round
{
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
box-shadow: 0px 1px 0 rgba(255,255,255,0.3);

-moz-border-radius:             1.5em !important;
-webkit-border-radius:          1.5em !important;
border-radius:                  1.5em !important;
}

解决方案

It is hard to get the exact look because jQM 1.4 no longer adds all the inner spans within the button, but this should get you close:

.btn_round
{
    -moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
    box-shadow: 0px 1px 0 rgba(255,255,255,0.3);

    -moz-border-radius:             1.5em !important;
    -webkit-border-radius:          1.5em !important;
    border-radius:                  1.5em !important;
    background-image: linear-gradient(rgb(68, 68, 68), rgb(45, 45, 45));
    background-origin: padding-box;
    background-size: auto;
    border-color: rgb(17, 17, 17);
    box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px;
    text-shadow: rgb(17, 17, 17) 0px 1px 1px;   
}
.btn_round:after{
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
    box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
}

Updated FIDDLE

这篇关于如何获得＆QUOT;旧式＆QUOT;在新的j​​Query Mobile的圆润的3D按钮1.4+的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！