Tag: css3

如何使用CSS flexbox设置固定宽度的列: CodePen： http ://codepen.io/anon/pen/RPNpaP。我想要红色框只有25 em宽，当它在并排视图 – 我试图通过设置CSS内部的 @media all and (min-width: 811px) {…} 至 .flexbox .red { width: 25em; } 但是当我这样做时，会发生这种情况： View post on imgur.com 任何想法我做错了什么？非常感谢。

使用CSS模糊Img的＆Div的HTML: 是否可以应用HTML元素（div＆img）模糊？我正在开发专为iPad，所以跨浏览器兼容性不是一个问题，我可以使用HTML5的CSS3技术。我知道如何模糊文字，但这个CSS不会模糊实际的HTML元素或其边框： text-shadow: 0 0 8px #000; color: transparent; 我GOOGLE了这个，但它不会模糊我的浏览器中的图像： filter: blur(strength=50);

如何隔离公共CSS样式的div？: 我有一些代码在这里例如在HTML中 <html> <body> <img src='an image source'/> <h1>Hi it's test</h1> <div id='mydiv'> <img src='an image source'/> <h1>Hi it's test</h1> </div> </body> </html> 如果我使用下面的CSS代码样式： img{ width:100px; height:100px; } h1{ font-size:26px; color:red; } 问题是：我怎样才能防止和隔离从公共标签样式风格的mydiv div标签内的标签？

在响应式网站上进行媒体查询的常见断点: 所以我正在开发我的第一个响应式网站，这个网站广泛使用了媒体查询。我想知道是否有一些我应该优化的常见页面宽度。我可能会有一个最大宽度（不stream畅）我想我可能有3-5个设置宽度与他们之间有趣的小CSS3转换（类似于CSS技巧如何工作）。目前我使用的数字有些随意： @media all and (max-width: 599px){…} @media all and (min-width: 600px) and (max-width:799px){…} @media all and (min-width: 800px) and (max-width:1024px){…} @media all and (min-width: 700px) and (max-width: 1024px){…} @media all and (min-width: 1025px) and (max-width: 1399px){…} @media all and (min-width: 1400px){…} 另外，我想我已经读过一些移动设备不像预期的那样（使用@media ）。这起到了什么作用，我应该如何处理这些情况呢？

在引导模式下将textarea的宽度设置为100％: 正在尝试所有可能的方式，但从来没有成功： <div style="float: right"> <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button> </div> <!– Modal –> <div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Comment</h4> </div> <div class="modal-body"> <textarea class="form-control col-xs-12"></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn […]

Respond.JS不在IE 8中工作: 出于某种原因，似乎回应JS是行不通的。我在IE 8中使用媒体查询来更改各种大小监视器的背景图像。在IE 8中没有背景，只有一个纯色。代码如下所示： <!–[if lt IE 9]> <script type="text/javascript" src="/js/html5-shiv.min.js"></script> <script type="text/javascript" src="/js/respond.min.js"></script> <![endif]–> 媒体查询如下所示： @media (min-width:769px) and (max-width:1366px){ html, body{ background: url(http://img.dovov.combackgrounds/1366-bg.jpg) no-repeat center top fixed #190303; background-size:100% auto; } } 上面的代码在IE 8中无法工作吗？我应该尝试使用另一个JS来使IE 8 Media Queries起作用吗？注意：看来html5-shiv确实有效。我正在一个实时Web服务器上testing。

（移动）浏览器中针对CSS3硬件GPU加速优化基于SVG的精灵表: 在过去的一周里，我一直在帮助朋友在浏览器中使用基于SVG的精灵表单进行实验。我们想要提出一个理想的工作stream程，在浏览器中准备，发布和运行高质量的animationgraphics。所以最好有一个animation数据源，可用于小型智能手机屏幕，平板电脑，视网膜显示器和桌面浏览器。从理论上讲，基于vector的SVG应该是理想的，但是由于SVG通常不被使用，所以我们决定对它进行testing。这个想法不是使用SMIL SVG（所以没有基于SVG的animation），而是创build一个animation精灵表（像通常的光栅数据PNG / JPG一样），但是用纯vector即SVG来做。它有点大，但是如果这样做的话 – 甚至可以更好地进行工作。加上逐帧的vectoranimation可以为我们的工作stream程做很多事情 – 它可以让我们使用Flash编辑器来做animation，然后将它们导出到SVG精灵表。无论如何，结果出人意料的好，但也在一些地区失败（请注意，为了testing目的，我们只使用基于Webkit的浏览器，例如Safari，Chrome，iOS上的移动Safari和Android ICS）。在CSS中，像这样触发一个精灵表的硬件加速是非常容易的（至less在具有关键帧和步骤的现代浏览器中） – 你只需要这样做： background-image: url(my.svg); -webkit-animation: walk 1s steps(12, end) infinite; 调用此处显示的基于关键帧的animation： @-webkit-keyframes walk { from { -webkit-transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-100%, 0, 0); } } 在iOS移动版Safari和Android ICS浏览器中，translate3d的使用应该让GPU能够使用硬件加速。令人惊讶的是，考虑到这是一种蛮力技术和相当大的vectoranimation（600x600px的testing） – 整个事情飞行。但它并不完美 – […]

有没有办法使用CSS将较长的数字（“$ 100000000”）分成更易读的三元组（“$ 100 000 000”）？: 我有一个有很多大数值的页面。数百万和数十亿美元无处不在。而且很难读懂这些数字，所以我的客户要求我把它们分成三个符号，“$ 100000000”=>“$ 1亿”。这是完全合理的要求，但问题是，我不想在服务器端做到这一点，我不想用JavaScript做到这一点。你看，我已经有一大堆javascript已经在这个页面上运行，对这些长数字进行复杂的计算，并且在从页面读取数据的每个位置插入一个parseReadableStringToInteger() ，并且将一个writeIntegerAsReadableString()在每个把结果写回页面的地方。所以，我正在考虑使用CSS将长string显示为一组短的块。我的第一个想法是-moz-column和-webkit-column ，但不幸的是，他们只能使用已经被空格分开的单词。也许有另一种方式？任何build议，欢迎。 ps跨浏览器兼容性不是必需的。我可以和Gecko和/或Webkit一起使用。

带有溢出的CSS圆周的像素化边缘：隐藏;: 这里是我的猫/animationJSFIDDLE 没有任何 drop-shadows以尽可能清楚地显示问题。据我了解，这是由border-radius引起的，可能是由于overflow: hidden; 。猫头鹰是不是这个问题是什么，只是一个类似的情况下我的例子。jsfiddle /猫是这个问题是关于，对不起混乱！这里是一个JSFIDDLE为我的猫与embedded盒阴影使用blur属性的box-shadow和像素化的边缘仍然是在眼睛周围相同。这里的答案确实解决了我用猫头鹰形象所看到的东西，而不是为了解答这个问题。这里是使用第三个值， blur的inset box-shadow的猫。我已经在Safari，Chrome和Firefox上testing了这个小提琴，它们似乎都是一样的。我有两只眼睛，我昨天从CSS开始制作的柴郡猫。一切都呈现得很好，我也做了一个猫头鹰（我第一次认为这是一个类似的情况，但它不是）的CSS有一个非常小的但类似的问题，在边缘像素化的眼睛。我也试图给眼睛一个紫色的边界，但像素边缘在边界边缘保持不变。在我的新CSS创build时，眼睛的外边缘非常像素化，似乎是父圆圈的颜色（黄色）。这是眼睛的CSS。 .eye { border-radius: 50%; height: 100px; width: 100px; background: #FAD73F; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; position: relative; display: inline-block; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); z-index: 100; […]