Tag: css3

一个Flex项目设置了兄弟姐妹的身高限制

我有两个兄弟元素，每个都包含dynamic内容。 <div class="flex"> <div class="sibling-1"></div> <div class="sibling-2"></div> </div> 在某些情况下， sibling-1将有更多的内容，然后sibling-2 ，反之亦然。 我希望第二个元素sibling-2的高度总是等于第一个sibling-1的高度。 如果sibling-2的高度大于sibling-1的高度，则会溢出flex div，从而可以滚动。 有什么办法可以用Flexbox来完成这个任务吗？

透明的半圆切出一个div

我只想用CSS3做一个透明的半圆形切割。 唯一的要求是形成形状的所有元素 必须是黑色或透明的 。 我不能用一个白色圆圈的黑色矩形，因为半圆要透明，让背景透明。 所需形状：

如何根据CSS页面中另一个元素的状态select一个元素？

我有元素可以反映不同的状态，或者由用户（ :hover ， :focus等）触发或由服务器操作（ data-status="finished" ， disabled等）。 我可以定位具有改变状态的元素，但是我似乎无法find一种方法来根据元素的状态来定位DOM中的其他元素。 例： <section> <div>Element 1</div> <div data-status="finished">Element 2</div> <div>Element 3</div> </section> <section> <div>Element 4</div> <div class="blink">Element 5</div> <div>Element 4</div> <div>Element 4</div> <div class="spin">Element 4</div> … </section> 或者只是使用适当的服务器端样式呈现元素。 有没有一个CSSselect器，让我指定哪些元素应根据目标元素的状态来select？ 就像是： div[data-status~=finished]:affect(.blink, .spin) 这也可以让我也瞄准与CSS只具有相同的父母的元素 ？

柔性容器中的文本不包装在IE11中

考虑下面的代码片段： .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> […]

文本溢出：省略号在Firefox 4？ （和FF5）

text-overflow:ellipsis; CSS属性必须是Microsoft为Web所做的less数几件事情之一。 所有其他浏览器现在支持它…除了Firefox。 火狐开发者自2005年以来一直在争论，但是尽pipe有明显的需求，但他们似乎并没有真正实现它（即使是一个实验-moz-实现也是足够的）。 几年前，有人想出了一个方法来攻击Firefox 3，使其支持省略号 。 hack使用-moz-binding特性来使用XUL来实现它。 相当多的网站现在正在使用这个黑客。 坏消息？ Firefox 4正在删除-moz-binding特性 ，这意味着这个黑客将不再工作。 所以，一旦Firefox 4发布（本月晚些时候，我听到），我们将回到它不能支持这个function的问题。 所以我的问题是：有没有其他解决方法呢？ （如果可能，我试图避免回到Javascript解决scheme） [编辑] 大量的表决，所以我显然不是唯一想知道的人，但我到目前为止有一个基本上说'使用JavaScript'的答案。 我仍然希望有一个根本不需要JS的解决scheme，或者最糟糕的情况是只使用它作为CSSfunction不起作用的后备。 所以我要在这个问题上发表一个赏金，在某个地方find答案的机会。 [编辑] 更新：Firefox进入了快速开发模式，但是尽pipeFF5现在正式发布，但这个function仍然不被支持。 而现在大多数用户已经从FF3.6升级，黑客已不再是一个解决scheme。 我听说这个好消息可能会被添加到Firefox 6中，随着新的发布时间表应该只在几个月内。 如果是这样的话，那么我想我可以等待它，但是很遗憾，他们不能早日排好它。 [最终编辑] 我看到省略号function最终被添加到Firefox的“Aurora Channel”（即开发版本）中。 这意味着它现在应该作为Firefox 7的一部分发布，这个版本将在2011年底发布。真是太好了。 发行说明可在这里： https : //developer.mozilla.org/en-US/Firefox/Releases/7

为什么我的CSS3媒体查询不适用于移动设备？

在styles.css中，我正在使用媒体查询，两者都使用以下变体： /*–[ Normal CSS styles ]———————————-*/ @media only screen and (max-width: 767px) { /*–[ Mobile styles go here]—————————*/ } 当我缩小窗口的时候，网站的大小会根据我想要的常规浏览器（Safari，Firefox）的大小来调整，但是移动设备在手机上根本不显示。 相反，我只看到默认的CSS。 任何人都可以指向正确的方向吗？

Twitter Bootstrap 3：如何使用媒体查询？

我使用Bootstrap 3来构build一个响应式布局，根据屏幕大小调整几个字体大小。 我如何使用媒体查询来制作这种逻辑？

作为背景图像时，修改SVG填充颜色

将SVG输出直接与页面代码内联，我可以简单地用CSS修改填充颜色，如下所示： polygon.mystar { fill: blue; }​ circle.mycircle { fill: green; } 这很好，但是我正在寻找一种方法来修改SVG的“填充”属性，当它被用作一个BACKGROUND-IMAGE。 html { background-image: url(../img/bg.svg); } 我怎样才能改变颜色？ 这甚至有可能吗？ 作为参考，这里是我的外部SVG文件的内容： <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/> <circle class="mycircle" […]

为什么不能将供应商特定的伪元素/类组合成一个规则集？

在CSS中，可以使用特定于供应商的伪类和伪元素（以获得最佳的跨浏览器覆盖率）的组合来在input中设置placeholder文本的样式。 这些都具有相同的基本属性（即文本样式和颜色声明）。 然而，尽pipe我不可避免地要使用相同的风格，而不考虑浏览器供应商，但似乎不可能将这些风格结合到一个以逗号分隔的select器中（就像您希望使用两个select器的其他CSS一样）相同的样式）。 作为一个例子，我倾向于使用以下四个select器来定位占位符样式： input:-moz-placeholder input::-moz-placeholder input:-ms-input-placeholder input::-webkit-input-placeholder （尽pipe:-moz-placeholder 被弃用 ，而是支持::-moz-placeholder这只发生在FireFox 19的发布中，所以目前都需要这两种方法才能获得更好的浏览器支持）。 令人沮丧的是，声明和赋予每个（相同）风格会导致CSS内部的重复。 所以，为了确保占位符文本是右alignment和斜体的，我最终会得到： input:-moz-placeholder{ font-style: italic; text-align: right; } input::-moz-placeholder{ font-style: italic; text-align: right; } input:-ms-input-placeholder{ font-style: italic; text-align: right; } input::-webkit-input-placeholder{ font-style: italic; text-align: right; } 我真正想要做的就是把它们组合成一个单独的逗号分隔的规则集： input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-webkit-input-placeholder{ font-style: italic; text-align: right; } 但是，尽pipe这样做很公平，但这似乎并不奏效。 这让我担心，我不了解CSS的一些基本部分。 任何人都可以解释为什么发生这种情况？

使用渐变背景的CSS3转换

我试图转换hover与CSS缩略图，以便hover时，背景渐变淡入。转换不工作，但如果我只是将其更改为rgba（）值，它工作正常。 渐变不被支持？ 我也尝试使用一个图像，它也不会过渡的形象。 我知道这是可能的，因为在另一个post有人做了，但我无法弄清楚究竟如何。 任何帮助>这里有一些CSS可以使用： #container div a { -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; position:absolute; width:200px; height:150px;border: 1px #000 solid; margin:30px;z-index:2 } #container div a:hover { background:-webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0,0,0,.7)), to(rgba(0,0,0,.4))) }