Articles of css3

Android Webview是否支持CSS3 WebKitanimation?

Android操作系统上的WebView控件是否支持硬件加速的css3animation? 所有的webkit css(例如:-webkit-transition bla bla)我已经在Safari Mobile上工作了,他们在android上的工作方式是一样的吗?

border-radius在现代原生Android浏览器中不起作用

我有一个使用border-radius的页面。 它不会在原生Android浏览器中四舍五入; 它显示与方angular。 它显示在桌面的Chrome浏览器,IE浏览器,FF等四舍五入罚款,但不是在本机手机浏览器。 有谁知道这是否是浏览器本身的问题,一些额外的CSS扩展,我不使用等? 这是我的CSS(在演示中): .bigButton2 { width: 320px; height: 200px; margin: auto; padding: 20px; background-color: #521c0b; color: #FFFFFF; border: 3px solid #e3b21e; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; } 我build立了一个JSFiddle: http : //jsfiddle.net/VJvQA/ 我已经尝试过填充,没有填充,没有箱子大小,没有箱子大小,它只是显示为尖angular。 任何帮助或见解,将不胜感激。 我意识到已经有人发布了这个( border-radius样式在android浏览器中不起作用 ),但是他没有提供任何代码,JSFiddle,并且没有任何真正的答案而被错误地回答了一个普通的问题。 如果可能的话,我会冷静下来,但是我认为,写一个真正写得好的问题会更好。 谢谢!

css3转换rotate3d与透视不工作在Android上

我有一个使用3D转换的Web应用程序,它可以在Android 4.1的Android浏览器中正常运行。 但是,PhoneGap容器中的相同应用程序导致挤压和展开animation,而不是透视3D旋转。 有没有办法让它在PhoneGap中运行,或者是否使用了不能进行3D转换的不同渲染引擎? 我用 -webkit-perspective: 300; 在父母和 -webkit-transform: rotate3d(0, 1, 0, -180deg); -webkit-transform-style: preserve-3d; 在旋转的图像上。

Android浏览器不支持百分比值的边框半径

在Android浏览器中使用边框半径的%值是否存在已知问题? 我注意到当我使用: .element { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } 边界半径似乎适用于所有的移动浏览器,但是当我使用: .element { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } 在Android浏览器上,边框半径不适用。

li元素中的一个div的jquery点击事件没有在移动Safari中被触发

修正:最后我直接生成元素,而不是由jQuery呈现。 Updated2:似乎很清楚真正的问题。 我做了一些testing,只有一个testing,我插入一个链接。 但是我不想绑定整个li元素,而是绑定一个div元素。 更新:我做了一些关于DIV的位置的修改,它现在在Android的工作,但移动Safari甚至在UL列表中的任何元素。 以下方法适用于桌面Safari和Chrome,但不适用于其移动版本。 有任何想法吗? JS: $('#SubCategories > li .likeRibbon').live('click', function () { …… }); HTML: <ul id="SubCategories"> <li id="st2" > <div class="likeRibbon">Like?</div> </li> </ul> CSS: #SubCategories .likeRibbon { border-style: solid none solid none; border-width: 1px 0px 1px 0px; border-color: #565656; background-color: #565656; color: #333; text-shadow: 0 1px 0 #777, 0 -1px 0 […]

当边框半径小于整体边框宽度时,Android浏览器呈现边框错误

这是Android bug 41913。 感谢谁打开它! 我认为, 这和以前的问题几乎一样,尽pipe这里的屏幕截图看起来与我所看到的截然不同。 我想要做的是创build一个厚顶部边框和圆angular的框, 就像这个JSBIN例子一样 。 这在桌面浏览器(以及支持border-radius浏览器)和iOS Safari以及Chrome上运行良好,但旧版Android浏览器显示如下: android http://img.androidcookie.com/android/android.png 边界呈现为使得曲线以外的较厚部分不会到达边缘。 有谁知道是否有办法让浏览器正确地做到这一点? 这似乎是一个至less回溯到Android 2.3的一致性错误; 截图是从一个4.0.3手机。 这是来自JSBIN的HTML: <body class=single> <div class=dialog-bound> Hello World </div> </body> 和CSS(从实际项目中抽取的类名): body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; margin: 50px auto; max-width: 32em; border-width: 28px 0 8px 0; border-style: solid; border-color: #89BAE2; -webkit-border-radius: […]

溢出隐藏不适用于Android

我有一个图片显示在DD圆angular。 当我build立它,并得到它在android设备上溢出:隐藏不起作用,完整的图片显示在dd。 任何人都有这个问题,并知道解决方法/修复? 这是DD的CSS。 .empImage { position:absolute; width:90px; height:110px; top:0; right:0; overflow: hidden; background-color: #eaeaea; border: #f26122 solid thin; -moz-border-radius: 15px; border-radius: 25px; -moz-box-shadow: -5px 0px 5px #666; -webkit-box-shadow: -5px 0px 5px #666; box-shadow: -5px 0px 5px #666; }

如何在iOS和Android上正确使用-webkit-device-pixel-ratio?

iOS和Android均支持-webkit-device-pixel-ratio查询,但由于iOS不支持target-densitydpi=device-dpi因此会导致不同的结果。 例如: @media screen and (-webkit-device-pixel-ratio: 2) { body { font-size: 2em; } } 在Galaxy Nexus上会使字体看起来不错,但在iPhone 4上会太大。 有没有办法在没有JavaScript的iOS上模拟target-densitydpi=device-dpi ,或者在iOS上禁用-webkit-device-pixel-ratio ,并将其模糊的图像作为备用而留给用户?

Android 2.2上的CSS3animation闪烁(webkit-transform:同时翻译(..)scale(..))

我在Android上做了一些关于CSS3animation的研究(使用webkit转换进行转换)。 CSS3animation在Webkit中仍然是一个实验性的function。 如果您尝试同时进行翻译和缩放,则会在CSSanimation中发现一些故障和/或错误(例如,请参阅http://www.youtube.com/watch?v=vZdBVzN1B8Y )。 换句话说,在Android的许多版本中,属性-webkit-transform:matrix(…)无法正常工作。 要同时进行缩放和平移的唯一正确方法是按此顺序设置“-webkit-transform:scale(…)translate(…)” 。 我会在这篇文章的底部撕掉我的结果。 正如你所看到的,我已经克服了其中的大部分。 然而,在Android 2.2(Froyo)的某些转换中仍然有一些“闪烁”。 现在我的问题是:有没有什么办法可以在Android 2.2上同时进行缩放和翻译? 我也试过-webkit-backface-visibility:hidden; , -webkit-perspective:1000; 和-webkit-transform:translate3d(..,0),但是这些属性在转换中引入了一些小故障。 您可以在以下video中看到: http : //www.youtube.com/watch?v= Aplk-m8WRUE转换停止后缩放将被取消。 有没有其他的解决办法来抑制闪烁? 有任何想法吗? 下面是关于Android上CSS3转换的结果(1.5 <= ver <= 2.2)。 它在蓝色框中同时使用缩放和翻译。 <html> <head> <title>css3test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width"> </head> <body> <div id='log'></div> <div id='box' style="background-color: blue; width:100; height:100;"></div> <script language='JavaScript'> function mesg(str) […]

媒体查询在Android上的行为不像预期的那样

我有4个媒体查询。 第一,第三和第四的工作,但第二个似乎并没有激活。 为什么480×720(第二媒体查询)默认第一个媒体查询? @media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} } @media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} } @media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} } @media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} } 预期的是: 究竟发生了什么: […]