Question

所以我想为我的jQuery Mobile按钮使用一些自定义颜色，但是当我这样做时，它似乎对（圆角）角落做了一些时髦的事情。更多＆＃34; border-radius＆＃34;我使用，角落越多像素化。这是一个例子......

的jsfiddle： https://jsfiddle.net/pxws02au/

<!doctype html>
<html>
<head>
<style>
   #buttons .ui-btn {
      background: rgb(0,0,255);
      border-radius: 1em;
   }
</style>
</head>

<body>
<div data-role="page"> 
    <div data-role="header" data-position="inline"></div>
    <div data-role="content">
        <div id="buttons">
            <a href="#" data-role="button">1</a>
            <a href="#" data-role="button">2</a>
            <a href="#" data-role="button">3</a>
        </div>
    </div>
</div>
</body>
</html>

如果我完全删除边框（border：none），则可以解决像素化问题。但我更喜欢一种允许我保留（并设计）边框的解决方案。

我使用我的笔记本电脑（Chrome＆amp; FF），我的Android手机和我的Android平板电脑测试了以上链接...并且所有设备上的按钮角都是像素化的。

有什么想法吗？

Answer 1

使用background-clip: padding-box

将背景限制在边界之外

#buttons .ui-btn {
  background: rgb(0, 0, 255) none repeat scroll 0 0;
  background-clip: padding-box; /* Add */
  border-radius: 1em;
}

Transparent border

具有自定义背景颜色的jQM按钮具有像素化角点

1 个答案: