Tag: css3

Bootstrap 3无法正确显示graphics: 我从bootstrap 2.3迁移到bootstrap 3，一切正常。但是当我试图添加一些图标时，图标字体不能正确显示。我试图看看这里http://bootply.com/61521 ，只有'。glyphicon-envelope'正在正确显示。其他人则显示如“E001”等。我怎样才能解决这个问题？对于其他浏览器，glyphicons显示正常，只有firefox无法正确显示。

删除类时的CSS过渡: 我有一个表单作为设置页面。当表单元素被修改时，它们被标记为unsaved并具有不同的边界颜色。当表单被保存时，它们被标记为具有另一个边框颜色的保存。我想要的是当表格被保存时，边框会逐渐淡出。顺序将会是： <input type='text' class='unsaved' /> Not saved yet, border is yellow <input type='text' class='saved' /> Saved, so the border is green <input type='text' class='' /> Fade out if coming from class saved 如果在saved的类被删除的情况下，我可以获得一个CSS3转换，那么它可能会淡出，一切都将变得晦涩难懂。目前，我必须手动设置animation效果（当然使用插件），但看起来不稳定，我想将代码移动到CSS3，以便更平滑。我只需要这个工作在Chrome和Firefox 4 +，但其他人会很好。 CSS：这是关联的CSS： .unsaved { border: 3px solid #FFA500; padding: 0; } .saved { border: […]

如何强制一个弹性框每行显示4个项目？: 我正在使用弹性框来显示8个项目，这些项目将dynamic调整我的页面大小。我如何强制它分成两行的项目？（每行4个）？这里是一个相关的剪辑：（或者如果你喜欢jsfiddle – http://jsfiddle.net/vivmaha/oq6prk1p/2/ ） .parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { display: flex; font-size: 0; flex-wrap: wrap; margin: -10px 0 0 -10px; } .child { display: inline-block; background: blue; margin: 10px 0 0 10px; flex-grow: 1; height: 100px; } <body> <div class="parent-wrapper"> <div class="parent"> <div […]

将一个未知大小的大图像放在一个较小的div中，并将其隐藏起来: 我想在一个没有JavaScript和没有背景图像的div中心img。这里是一些示例代码 <div> <img src="/happy_cat.png"/> </div> 我不知道img的大小，它应该能够超过父级的宽度我不知道父div的宽度（这是100％）父div有一个固定的高度图像比父级大，父级溢出：隐藏只需要支持现代浏览器期望的结果。（忽略不透明等，只需注意定位）。我知道这可以很容易地完成与背景图像，但这不是我的select。我也可以使用JavaScript，但它似乎是一个非常重的方式来实现这一目标。谢谢！插口

：不（：空）CSSselect器不工作？: 我有一个这个特定的CSSselect器的时间，不想工作，当我添加:not(:empty) 。它似乎适用于其他select器的任何组合： input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none } 如果我删除:not(:empty)部分，它工作得很好。即使我将select器更改为input:not(:empty)它仍然不会selectinput文本的input字段。这是打破了，还是我只是不允许使用:empty在一个:not()select器中为:empty ？我唯一能想到的另一件事是，浏览器仍然说这个元素是空的，因为它没有孩子，只是说一个“价值”。那么:emptyselect器是否对input元素和常规元素没有单独的function？这看起来似乎不太可能，因为使用:empty在一个字段上填空并在其中input内容将导致替代效果消失（因为它不再是空的）。 testingFirefox 8和Chrome。

CSS / JS防止拖影的鬼影？: 有没有一种方法可以防止用户看到他们试图拖动的图像的鬼魂（不关心图像的安全性，而是体验）。我已经尝试过这个修复了文本和图像上的蓝色select而不是鬼影的问题： img { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } （我也尝试嵌套在div中的图像应用于div相同的规则）。谢谢

我如何创build纯CSS的三维球体？: tl; dr：我想用CSS创build一个实际的3d球体，而不仅仅是一个幻觉注意：一些片段示例没有响应。请使用全屏。使用纯CSS，您可以像这样创build和制作一个3D立方体的animation ： #cube-wrapper { position: absolute; left: 50%; top: 50%; perspective: 1500px; } .cube { position: relative; transform-style: preserve-3d; animation-name: rotate; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes rotate { 0% { transform: rotate3d(0, 0, 0, 0); } 100% { transform: rotate3d(0, 1, 0, 360deg); ; } } .face […]

只在一边插入盒子阴影？: 有没有可能以某种方式只有在一个div的插入框阴影？请注意，我在这里讨论的是一个插入的阴影框，而不是正常的外框阴影。例如，在下面的JSFiddle中，您会看到插入的阴影在不同程度上出现在所有的四面。我怎样才能让它只显示在顶部？或者至多只在顶部和底部？ JSFiddle： http : //jsfiddle.net/ahmadka/KFrun/ HTML： <div class="myDiv"> <div class="text"> Lorem ipsum …. </div> </div> CSS： .box { -webkit-box-shadow: inset 0px 5px 10px 1px #000000; box-shadow: inset 0px 5px 10px 1px #000000; } .text { padding:20px; }

CSS3转换不起作用: 我试图通过旋转他们10度来改变我的菜单项。我的CSS在Firefox中工作，但我没有在Chrome和Safari中复制效果。我知道IE不支持这个CSS3属性，所以这不是一个问题。我使用下面的CSS： li a { -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); } 有谁可以请build议我去哪里错了？谢谢。

如何展开div高度来填充父div – CSS: 我有一个像下面divs的页面 <div id="container"> <div id="A"> </div> <div id="B"> <div id="B1"></div> <div id="B2">B2</div> </div> <div id="C"></div> <div id="D"> </div> </div> 与造型一样; html, body { margin: 0; padding: 0; border: 0; } #B, #C, #D { position: absolute; } #A{ top: 0; width: 100%; height: 35px; background-color: #99CC00; } #B { top: 35px; width: 200px; bottom: 35px; […]