Tag: css3

旋转或旋转hover的图像

我想知道如何在旋转或旋转图像时进行旋转 。 我想知道如何在下面的代码中用CSS来模拟这个function： img { border-radius: 50%; } <img src="http://i.imgur.com/3DWAbmN.jpg" />

如何在CSS中设置min-font-size

我想为我的HTML页面中的每个元素设置最小字体大小。 例如，如果有字体大小小于12px的元素，则它们将变为12px。 但是，如果有字体大小grater然后12px的元素，他们不会改变。 有没有办法用CSS做到这一点？

flexbox将列左右alignment

学习如何使用flexbox，通过使用典型的css，我可以将两列中的一列左移，而另一列右移一列之间的空格。 我将如何做到这一点与flexbox？ http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px #000; } #b { width: 20%; border: solid 1px #000; height: 200px; } <div id="container"> <div id="a"> a </div> <div id="b"> b </div> </div>

CSS3转换 – 淡出效果

我正在尝试在纯CSS中实现“淡出”效果。 我在网上查了一些解决scheme，这里是小提琴 。 不过在线阅读文档之后 我想弄清楚为什么幻灯片animation不起作用。 任何指针？ 这是HTML <div class="dummy-wrap"> <div class="success-wrap successfully-saved">Saved</div> </div> CSS .dummy-wrap { animation: slideup 2s; -moz-animation: slideup 2s; -webkit-animation: slideup 2s; -o-animation: slideup 2s; } .success-wrap { width: 75px; min-height: 20px; clear: both; margin-top: 10px; } .successfully-saved { color: #FFFFFF; font-size: 20px; padding: 15px 40px; margin-bottom: 20px; text-align: center; -webkit-border-radius: 5px; […]

高级CSS技巧：如何跨越CSS3网站布局中的多个列的图像？

鉴于 ：一个基本的四列布局，一个简单的连续的文本段落 ，以及只有一张照片跨越三列，右上alignment。 现在，我们如何在html / css3 / js的最后三列中优雅地展示我们的图像，以便我们的文本自动在图像周围stream动？ 。 。 .quatroColumns{} /* css multi column 4 columns */ .imageSpanning2Columns{} /* align to top-right */ .imageSpanning3Columns{} /* align to top-right */ .imageDescription{} /* description box over image */ http://jsfiddle.net/Vbr9d/205/ （ find图像应该去的地方的一个痛苦：不简单＆不优雅的开始！ ） http://jsfiddle.net/Vbr9d/206/ （ 看起来丑陋，但HTML开始优雅的图像和文字分离！ ） 忘记旧的浏览器版本，除了目前主要的浏览器版本FireFox InternetExplorer Chrome Safari。 任何想法，方向或实验都是受欢迎的。 可选的JavaScript试用版将段落文本自动分成不同的div，但也只有在某种程度上，如果你确信CSS将不会成为这种基本布局，直到2050年。

如果没有JavaScript，当长一个不合适时，我可以显示不同的文字吗？

我正在尝试做什么 我有一个大小有限的框，应该包含一些文本： .box { width: 100px; height: 40px; background-color: yellow; } <div class="box"> Some text goes here. </div> 但是，如果文本太长而无法放入文本框中，我想用我预先准备的另一个更短的文本replace文本。 例如，如果我想用这两个名字填充两个框： Short version Long version ———————————————————— Rudolf E. Raspe Rudolf Erich Raspe Baron Munchausen Hieronymus Karl Friedrich von Munchhausen 那么第一个盒子里面会包含“鲁道夫·埃里克·拉斯佩”（Rudolf Erich Raspe），因为里面的尺寸足够短，而第二个盒子里会包含“男爵男爵”（Baron Munchausen），因为男爵的全名太长了。 我怎样才能build立这样一个盒子，只使用HTML5和CSS3？ 浏览器的兼容性很重要，但是我并不需要适应11之前的旧版本或Internet Explorer。 备择scheme 我可以select任何标准选项来处理太长的文本 – 让它溢出，或通过overflow: hidden ，或添加滚动条，或添加省略号，或任何其他标准解决scheme。 但是因为我已经有了每个可能的文本的短版本，所以我想用这些。 例如，我可以通过使用包装器并将其大小与盒子的大小进行比较来在JavaScript中执行此操作。 但是如果可能的话，我想要一个非JavaScript的解决scheme。 我试过了 […]

属性select器的值等于A还是B？

我想知道是否可以在CSS中指定一个属性等于两个值之一的元素，如下所示： input[type=text][type=password] 然而，这个select器似乎并没有工作（我假设因为指定两次相同的属性是无效的），有没有人知道如何做到这一点？ 谢谢，Alex。

在什么情况下Flex-shrink应用于柔性元素，它是如何工作的？

我已经玩过这个漂亮的CSS Flex的演示页面 ，我理解了大部分的概念，但是我无法看到flex-shrink在工作中。 无论我在那里应用什么设置，我都看不到页面上的差异。 从规格 ： <“柔性成长”> 此组件设置“flex-grow”longhand，并指定flex增长因子，该因子决定了在分配正空闲空间时flex项目相对于flex容器中其余Flex项目将增长的程度。 省略时，设为“1”。 <“柔性缩水”> 此组件设置“flex-shrink”longhand并指定柔性收缩因子，该因子决定在分配负空闲空间时，Flex项目相对于Flex容器中其余Flex项目收缩的程度。 省略时，设为“1”。 柔性收缩因子在分配负空间时乘以柔性基础。 在什么情况下应用flex-shrink （即负空间分布时）？ 我已经尝试过在flexbox元素上设置宽度的自定义页面，并且在里面的元素的宽度（min-）使溢出，但它似乎不是描述的情况。 它已经被支持了吗？ 作为解决scheme，链接的演示中的一组选项或者JSFiddle-like现场演示将非常感谢。

什么是弹性基础属性设置？

将max-width或width设置为弹性项目而不是flex-basis有什么区别？ 它是flex-grow/shrink属性的“突破点”吗？ 而当我设置flex-wrap: wrap行浏览器如何决定在哪一点下移项目到新行？ 是根据它们的宽度还是“弹性基础”？ 例如： http : //jsfiddle.net/wP5UP/最后两个框有相同的flex-basis: 200px ，但是当窗口在300px和400px之间时， 只有其中一个向下移动。 为什么？

嵌套伪元素内的伪元素

我有一个：开幕前的“报价”和之后的一个结束报价。 现在我想要的是：之后：“引用”参考后，但我不能得到它的工作。 有谁知道这是可能的吗？ 我的代码到目前为止： – blockquote:before { content: '\201C'; } blockquote:after { content: '\201D'; } blockquote { font-size: 22px; line-height: 24px; text-indent:60px; } blockquote:before { font-size: 170px; margin-left: -136px; margin-top: 50px; opacity: 0.2; position: absolute; overflow:visible; float:left; width:135px; } blockquote:after { float: right; font-size: 170px; margin-right: 35px; margin-top: 33px; opacity: 0.2; overflow:visible; width:135px; } blockquote[cite]:after:after […]