Tag: css3

如何覆盖伪元素的CSS设置？: 我知道，之前已经问过，但我发现没有干净的方式覆盖这个CSS： .ui-input-search:after { content: ""; height: 18px; left: 0.3125em; margin-top: -9px; opacity: 0.5; position: absolute; top: 50%; width: 18px; } 我需要在元素上留下ui-input-search ，但可以添加我自己的类，如： .ui-input-search-no-pseudo:after { content: ""; } 问题：有没有简单的方法来删除“伪css”，而不必逐行覆盖CSS行？谢谢！

CSS关键帧animationCPU使用率高，应该是这样吗？: 我在几个元素上使用以下关键帧animation： @keyframes redPulse { from { background-color: #bc330d; box-shadow: 0 0 9px #333; } 50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; } to { background-color: #bc330d; box-shadow: 0 0 9px #333; } } @-webkit-keyframes redPulse { from { background-color: #bc330d; box-shadow: 0 0 9px #333; } 50% { background-color: #e33100; box-shadow: 0 0 […]

如何有条件地使用JavaScript像CSS3媒体查询，方向？: 如何有条件地使用JavaScript像CSS3媒体查询，方向？例如我可以写特定的CSS @media only screen and (width : 1024px) and (orientation : landscape) { .selector1 { width:960px} } 现在我只想运行一些JavaScript，如果它匹配相同的条件喜欢 @media only screen and (width : 1024px) and (orientation : landscape) { A javascript code here } 我有一个外部的JavaScript例如http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js ，它应该只能运行在特定的屏幕大小和方向

用HTML和CSS滚动表格: 我有一张桌子，里面装满了数据 <table id="products-table" style="overflow-y:scroll" > <thead> <tr> <th>Product (Parent Product)</th> <th>Associated Sites</th> <th>Actions</th> </tr> </thead> <tbody> @for (int i = 0; i < Model.Count(); i++) { <tr> <td> <a href="Edit"><strong>@Model.ElementAt(i).Name</strong></a><br /> </td> <td> <span class="lesser"></span> </td> <td>@Html.ActionLink("Edit Product", "Edit", "Products")<br /> @Html.ActionLink("Associate Site", "Associate", "Products") </td> </tr> } <tr> </tbody> </table> 和CSS一样 #products-table { width: […]

透明空心或切出圈: 是否有可能只使用CSS 切出一个空心圆？这个我们都可以做：但是我们能做到吗？圆圈必须是中空的和透明的。因此这个问题并没有通过在div一个纯色圆来解决。

有没有什么办法指定一个CSS的简写“除了第一个/最后一个所有元素”？: 通常情况下，除了第一个（或最后一个）之外，需要为所有元素指定一个CSS样式。例如，在创build段落样式时，您希望为除最后一个元素之外的所有元素添加底部边距（或类似地，除了第一个元素之外的每个元素的顶部边距）。有没有办法做到这一点：比定义p {…}更简洁，然后是p:first-child {…} ？比p:nth-child(-n+1)更直接直观？如果没有，你知道有任何添加它的尝试吗？

如何在引导程序中使用css3中的响应式背景图像: 我不想使用HTML标记。这是我的CSS。我正在使用bootstrap 3.0。 background:url('images/ip-box.png')no-repeat; background-size:100%; height: 140px; display:block; padding:0 !important; margin:0; 在100％缩放这是好的。但是当我放大约180％时，图像会从上到下短，我想要一些CSS技巧。

不规则的可点击形状的图案: 我需要制作许多非矩形形状的图案。每个形状必须是交互式的，点击后才能显示图像。要求是把彩色玻璃的图像变成一个充满图像的网页。每个窗格都必须是可点击的，与您在教堂中看到的相似，但在第一次加载时，每个形状都是黑色和白色，单击它可以显示玻璃的颜色。我想这个解决scheme将包含2个部分，整个彩色玻璃图像的颜色版本和黑白版本。然后不知何故，点击每个小玻璃窗格需要隐藏其下方的黑色和白色部分，以显示下面的彩色图像。我不知道最好的解决scheme是什么，并且没有发现任何有用的帮助沿着类似于形状和随机互动区域的方式。我在结果的下面插入了一个示例，想象每个玻璃部分都是可点击的，并点击显示颜色。白线只是表示每个窗格的行为独立于其他。

Firefox的溢出 – 不适用于嵌套的Flexbox: 我用css3 flexboxdevise了100％宽度的100％高度布局，它可以在IE11上工作（如果仿真IE11是正确的话，可能在IE10上）。但是Firefox（35.0.1），overflow-y不起作用。正如你可以看到这个codepen： http ://codepen.io/anon/pen/NPYVga firefox是不正确渲染溢出。它显示一个滚动条 html, body { height: 100%; margin: 0; padding: 0; border: 0; } .level-0-container { height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .level-0-row1 { border: 1px solid black; box-sizing: border-box; } .level-0-row2 { -webkit-box-flex: […]

我如何创build一个calc mixin作为expression式来生成标签？: 我正在使用一个sass样式表，我希望使用calc元素dynamic调整一些内容。由于calc元素还没有标准化，我需要定位calc() ，- -moz-calc()和-webkit-calc() 。有没有办法让我创build一个mixin或函数，我可以传递一个expression式，以便它将生成所需的标签，然后可以设置为width或height ？