Tag: css3

CSS3 calc()不能在最新的chrome中工作

我注意到,我使用CSS3 calc()函数作为width的单位在最新版本的Chrome中无效。 在Chrome开发人员工具中, calc()的规则有一个删除线,在它的左边有一个黄色三angular形的感叹号。 这表明财产或价值不被承认。 我如何使它在现代浏览器中工作? 因为它是一个价值而不是一个财产,供应商前缀在哪里去? 更新: 当我说这是行不通的,我的意思是,铬开发工具是说,它不承认我的使用它的width: calc(100%-88px); 。 我怎么知道它不承认? 由于chrome开发工具中的样式规则旁边有删除线和黄色三angular形图标。 更新2: 以下是我在Chrome开发工具中看到的截图: http : //cl.ly/image/2g3W1l2u022e

有没有一种方法来使用〜运算符中的variables,比如〜“calc(100% – @spacing)”;

有没有办法使用更less的运算符中的variables,如 ~"calc(70% – @spacing)"; 当我尝试过它只能像静态值一样工作 ~"calc(70% – 10px)"; 我可以在beeing之前将string评估为属性吗?

你可以添加噪声CSS3渐变?

有没有可能在CSS中添加一个渐变的噪音? 这是我的径向渐变代码: body { color: #575757; font: 14px/21px Arial, Helvetica, sans-serif; background-color: #2f3b4b; background: -moz-radial-gradient(center 45deg, circle closest-corner, #2f3b4b 0%, #3e4f63 100%); background: -webkit-gradient(radial, center center, 10, center center, 900, from(#2f3b4b), to(#3e4f63)); } 我会添加什么,有噪音的顶部,给它的质感?

纯粹的CSS解决scheme,用于将项目拆分为dynamic数量的列

有没有一种方法来alignment列中的项目,列的数量取决于最宽的项目? 项目高度和容器宽度都是固定的,但项目宽度是dynamic的。 我正在寻找一个CSS的唯一方法来实现以下行为: (假设父容器的宽度是300px。) 如果最宽的项目宽于150像素,请使用单个列 如果最宽的项目在100px和150px之间,则使用两列 如果最宽的项目小于100像素,则使用三列 … 如果最宽的项目小于容器宽度/ N,则使用N个列 产生这种行为的一种可能的方法是使用display:inline-block并将width属性设置为使用JavaScript的容器中最宽元素的宽度。 看到这个JSFiddle的例子: 不过,我认为还应该有一个CSS的唯一方式来做到这一点。 可能吗? 如果没有,也许有一个优雅的CSS的方式分发/捕捉dynamic大小的项目到一个固定宽度的容器中的列?

CSSselect器不是元素types的子元素吗?

我想样式code元素不在标签内。 什么是最好的方法来完成这个? code:not(a code)似乎并没有工作,至less在Chrome上,尽pipe它似乎应该 我无法从控制台得到它的工作。 有没有其他的CSS可以用来做这个?

应该border-radius剪辑内容吗?

当容器有border-radius时,我的容器的内容不应该被切断吗? 示例HTML和CSS: <div class="progressbar"> <div class="buffer"></div> </div> .progressbar { height: 5px; width: 100px; border-radius: 5px; } .buffer { width: 25px; height: 5px; background: #999999; } 正如你所看到的,我在容器( .progressbar )上使用了border-radius , 但内容( .buffer )在容器外面 。 我在Google Chrome浏览器上看到了这一点。 这是预期的行为? PS这不是关于如何解决它,这是关于它是否应该这样工作。

为什么.class:最后一个types不工作?

为什么这不起作用? http://jsfiddle.net/84C5W/1/ <style> p{ display : none; } p.visible:last-of-type { display : block; }​ </style> <div> <p class="visible">This should be hidden</p> <p class="visible">This should be displayed</p> <p class="">This should be hidden</p> </div> 事实上,我的<p>中没有一个是可见的。 如果我在样式表中删除对“.visible”的引用,这会显示div中的最后一个<p>,但这不是我想要的。 当然,我一直只能保留一个“.visible”,但这是为了揭示.js的演示文稿,我没有控制javascript。 只有样式表… 编辑 :好的,很明显.class:最后types不起作用。 正如@Justus Romijn所说:最后一类伪类只是为了select元素而devise的(在我看来这是非常有限的,并且把这个特定的伪类放在一个或多或less的无用状态)。 无论如何,我想在这一点上重申我的问题:如何selectdiv中的最后一个元素与类“.visible”? 我不想为此使用Javascript。

使用Twitter Bootstrap重置样式表

在我的网站我使用twitter引导。 是否有必要包括reset.css与我的网站? 它包含在bootstrap.css文件中吗?

如何倾斜元素,但保持文本正常(未纠正)

是否有可能只使用CSS重现此图像? 我想将其应用于我的菜单,所以在hover实例上出现棕色背景 我不知道该怎么做,我只有; .menu li a:hover{ display:block; background:#1a0000; padding:6px 4px; }

使用overflow-x:scroll在IOS上进行加速/减速的平滑原生样式滑动滚动; 可滚动的div使用CSS

使用可滚动的div .scrollable-div{ overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } Android设备上的DEMO在滑动上滚动平滑,甚至有加速和减速。 在iPhone上相同的代码,滚动是僵硬的。 当用户释放触摸滚动停止立即。 你如何使iPhone像滚动加速/减速本地风格的Android浏览器一样滚动可滚动的div?