标签: css3

我在Twitter Bootstrap中看到了这个选择器:

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

有谁知道这种技术被称为什么以及它做什么？

我确信这个问题有一个简单的解决方案.基本上,如果我有两列,我怎么能在它们之间添加空格？

例如,如果html是:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

输出只是两列,彼此相邻,占据了页面的整个宽度.假设宽度设置为1000px每个div 都很500px宽.

如果我想要100px两者之间的空间我怎么能实现这个？显然,通过bootstrap自动调整div大小450px以补偿空间

我有以下CSS:

box-shadow: inset 0px 0px 2px #a00;

现在我正在尝试提取该颜色以使页面颜色"skinnable".有没有办法做到这一点？只需删除颜色,然后再次使用相同的密钥就会覆盖原始规则.

似乎没有box-shadow-color,至少谷歌没有任何改变.

我有一个继承的项目,有些地方是一个彻头彻尾的混乱.这是其中之一.我需要只针对IE(任何版本).

#nav li {
    float: left;
    height: 54px;
    background: #4f5151;
    display: table;
    border-left: 1px solid grey;
}

需要说明的是:在嵌入式样式表中,如果没有为html中的标记添加ID或类,我只需要在用户使用IE时应用边框样式.我怎样才能做到这一点？

编辑:找到Firefox的解决方案,编辑问题以反映这一点.

我正在尝试select使用CSS3 设置元素样式.我在WebKit(Chrome/Safari)中获得了我想要的结果,但Firefox并没有很好地发挥(我甚至不打扰IE).我正在使用CSS3 appearance属性,但出于某种原因,我无法摆脱Firefox中的下拉图标.

这是我正在做的一个例子:http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

正如你所看到的,我并没有尝试任何花哨的东西.我只想删除默认样式并添加我自己的下拉箭头.就像我说的,伟大的WebKit,在Firefox中不是很好.显然,-moz-appearance: none没有摆脱下拉项目.

有任何想法吗？不,JavaScript不是一个选项

是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？

这是我想要的,但在页面加载:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

到目前为止我发现了什么

• CSS3 transition-delay,一种延迟元素影响的方法.仅适用于悬停.
• CSS3关键帧,在加载时工作,但速度极慢.因此没用.
• CSS3过渡速度足够快,但不会在页面加载时设置动画.

我有一个4部分CSS3动画点击播放 - 但动画的最后一部分是为了将其从屏幕上取下.

但是,它一旦播放就会回到原来的状态.任何人都知道如何在最后一个css帧(100%)上停止它,或者如何摆脱它曾经玩过的整个div.

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

Bootstrap是否支持固定宽度按钮？目前,如果我有2个按钮,"保存"和"下载",按钮大小会根据内容而变化.

还有什么是扩展Bootstrap的正确方法？

所以,如果我理解z-index正确,在这种情况下它将是完美的:

我想将底部图像(标签/卡片)放在它上面的div下面.所以你看不到锋利的边缘.我该怎么做呢？

z-index:-1 // on the image tag/card

要么

z-index:100 // on the div above

也不起作用.也不是这样的组合.怎么会？

我尝试fieldset用display: flex和设置元素的样式display: inline-flex.

但是,它不起作用:flex表现得像block,inline-flex表现得像inline-block.

这在Firefox和Chrome上都会发生,但奇怪的是它适用于IE.

这是一个错误吗？我无法fieldset在HTML5和CSS Flexible Box Layout规范中找到任何特殊行为.

fieldset, div {
    display: flex;
    border: 1px solid;
}

<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>