Tag: css3

为什么在CSS3中启用硬件加速会降低性能？: 我正在使用从top: 0到top: 145px的转换在css3实验中移动6000个小div元素以testing性能。 Google Chrome浏览器无需使用硬件加速运行。如果我通过translateZ(0)启用硬件加速性能变得可怕。为什么？这是我的示例代码： http : //dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html 更新（2014-11-13）：由于这个问题仍然引起人们的关注，我想指出的是，问题本身似乎仍然存在，虽然提到的口吃可能不再在现代硬件提供的演示中可见。旧设备可能仍然会出现性能问题。

CSS禁用文本select: 目前，我已经把它放在body标签中来禁用文本select： body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 但是，我的input和textarea框现在是不input 。我怎样才能使这些input元素可选，其余的不可选？

圆形加载animation: 我正在尝试创buildApple的OS X圈子加载animation。我到目前为止所尝试的： .animation-wrapper { width: 200px; height: 200px; border: 1px solid black; border-radius: 50%; position: relative; overflow: hidden; filter: brightness(0.8); -webkit-filter: brightness(0.8); } .pie-piece1 { position: absolute; width: 50%; height: 50%; bottom: 0; left: 0; background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 100%); } .pie-piece2 { position: absolute; width: […]

CSS表列autowidth: 鉴于以下如何使我的最后一列自动大小的内容？（最后一列应该是autosize-width的内容，假设我只有1个li元素，它应该缩小为3 li元素等）： <table cellspacing="0" cellpadding="0" border="0"> <thead><!– universal table heading –> <tr> <td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td> <td class="tc">Type</td> <th>File</th> <th>Sample</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> <td>Division 4</td> <td>Division 5</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> <td>Division 4</td> <td class="last"> <ul class="actions"> <li><a class="iconStats" […]

我怎样才能在另一个div中居中？: 我有一个问题。我有这样的HTML代码： <div id="main_content" > <div id="container"> </div> </div> 像这样的CSS： #main_content { top: 160px; left: 160px; width: 800px; min-height: 500px; height: auto; background-color: #2185C5; position: relative; } #container { width: auto; height: auto; margin: 0 auto; padding: 10px; position: relative; } 我想#container将在#main_content中居中。但是，事实并非如此。我只是想找出原因以及如何让它居中。

CSS显示：当宽度设置为100％时，表格行不展开: 我有一个问题。我使用FireFox 3.6并具有以下DOM结构： <div class="view-row"> <div class="view-type">Type</div> <div class="view-name">Name</div> </div> 和下面的CSS： .view-row { width:100%; display:table-row; } .view-name { display: table-cell; float:right; } .view-type { display: table-cell; } 如果我脱离display:table-row正确显示，其中view-row显示宽度为100％。如果我把它放回去，它会缩小。我把这个放在JS Bin上：这是怎么回事？

使用CSS在hover的图像上创build缩放效果？: 我目前正在试图创build一个缩放效果hover在我的四个图像之一。问题是大多数例子通常使用表格或掩码div来应用某种效果。这是一个实现我想要的东西的例子。这是我的代码到目前为止。非常感谢！！ HTML <div id="menu"> <img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt=""> <img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt=""> <img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt=""> <img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt=""> </div> CSS #menu { max-width: 1200px; text-align: center; margin: auto; } #menu img { width: 250px; height: 375px; padding: 0px 5px 0px 5px; overflow: hidden; } […]