Tag: css3

如何在所有四面应用盒子阴影？: 我试图在所有四面应用一个box-shadow 。我只能在两面得到它：

iPhone iOS将不会正确显示框阴影: 该devise 响应式devise中的联系表单具有包含阴影和常规外部阴影的input字段。看下面的图片。代码 input { background:#fff; height:auto; padding:8px 8px 7px; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:#fff solid 3px; border-radius:4px; box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2); } 问题 iOS v4 +不能正确显示方块阴影。看下面的图片。经testing 我曾尝试使用-webkit-box-shadow。 -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, […]

用于css3关键帧animation的SASS（不是SCSS）语法: 有没有办法在SASS中编写关键帧？我发现的每个例子实际上都是SCSS，即使它说SASS。要清楚，我的意思是没有大括号的那个。

Custom.css已停止使用32.0.1700.76 Google Chrome浏览器更新: 我使用本网站的一些Google开发者工具主题： http : //devthemez.com/themes/chrome-developer-tools 但是，在32.0.1700.76米更新之后，所有主题都停止工作。我需要做些什么来让他们再次工作？谢谢

如果文本大于允许范围，则用css溢出淡出文本: 当文本的数量大于行可以处理的时候，我试图创build一个淡出文本的效果。我正在通过max-height ， overflow和linear-gradient的混合来实现这一点。像这样的东西。 max-height:200px; overflow:hidden; text-overflow: ellipsis; background: -webkit-linear-gradient(#000, #fff); 完整的小提琴可用。我试图达到类似于这个效果我有点亲近问题是，在我的情况下，文本从一开始就开始淡出，我希望它只有在真正接近最大尺寸时才开始淡出。让我们说开始淡出，如果它已经是150px。此外，我只使用-webkit前缀，我假设可能有其他前缀，我可以添加其他渲染引擎。有没有办法在纯CSS做到这一点？

如何在CSS中应用字体反别名效果？: 我们怎样才能在CSS中应用像Photoshop那样的清晰，锐利，强壮，stream畅的字体反锯齿？这些支持所有浏览器？

animation后CSSanimation属性保持不变: 我想获得一个CSSanimation属性留完后，这是可能的吗？这是我想要实现的… 元素在用户登陆页面时应该隐藏，3秒（或其他）后，它应该淡入，一旦animation完成，它应该呆在那里。这是一个小提琴的尝试… http://jsfiddle.net/GZx6F/ 这里是保存的代码… <h2>Test</h2> <style> @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } h2 { animation: fadeIn 1s ease-in-out 3s; } </style> 我知道如何做到这一点与jQuery ..这将是这样的… <h2>test</h2> <script> $(document).ready(function(){ $('h2').hide().delay(3000).fadeIn(3000) }); </script>

背景大小：封面不能在Android平板电脑上的肖像工作: 我使用background-size属性的全宽和高背景图像，但无法让它完全覆盖在纵向视图Nexus7平板电脑上的Chrome浏览器。它只覆盖宽度而不是高度，即它下面有大约200px的空白。但是，当我在桌面Chrome浏览器（或其他任何地方）中查看网站并在垂直显示器上模拟纵向尺寸时，它不会造成任何问题。任何人都有解决scheme？ CSS： html { background: url(http://img.dovov.compost_bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img.dovov.compost_bg.jpg', sizingMethod='scale')"; } 肖像屏幕截图：

如何用CSS分割不同颜色的圆: 我希望能够用另一种颜色的线段绘制一个圆，我希望覆盖的部分的数量能够从0%到100%以10%增量增加。 Google上的所有示例都不是细分市场。到目前为止，这是我所能想到的最好的： div.outerClass { position: absolute; left: 10px; top: 10px; height: 2.5px; overflow: hidden; -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */ transform: rotate(270deg); } div.innerClass { width: 10px; height: 10px; border: 5px solid green; border-radius: 36px; } <div class="outerClass"> <div class="innerClass"></div> </div> 0% ， 50%和100%我都可以。

如何计算CSS像素大小？: 在深入CSS单元的过程中，我遇到了参考像素的定义。但是，我无法find一个与CSS像素单元关系的一致和全面的描述。我在这方面做了一些研究，但对我还是有点不清楚。 1.收集到的信息 1.1像素定义像素有两种不同的types/定义： “设备像素” – 显示屏上的单个物理点。和： CSS像素 – 最接近匹配参考像素的单位。 [ 1 ] 同名的两个平行的概念绝对不能澄清混淆。我完全理解介绍第二个的目的，但我觉得它的命名误导。 CSS像素被分类为绝对单位，并且： “绝对长度单位是固定的相互关系。” [ 1 ] 上面的说法对于像素以外的每个单元都是非常明显的。遵循w3c规范： “对于一个CSS设备来说，这些维度要么通过将物理单元与物理测量相关联，要么通过将像素单元与参考像素相关联来锚定（i）。（…）请注意，如果锚点单位是像素单位，则物理单位可能与其物理测量值不匹配。或者，如果锚单元是物理单元，则像素单元可能不映射到整个设备像素。“[ 1 ] 考虑到上述引文，我假设绝对单位不是绝对的，因为它们可能会锚定在参考像素上。 1.2参考像素参考像素本身实际上是一个angular度测量[ 2 ]： “参考像素是指像素密度为96dpi，距离arm距离为读数的设备上的一个像素的可视angular度，对于标称臂长为28英寸，视angular大约为0.0213度。 [ 1 ] 以下图片显示的是：尽pipe将参考像素定义为视angular，我们可以进一步阅读： “对于arm长度来说， 1px因此相当于大约0.26毫米（1/96英寸）” 。抛开不一致的地方，我们能够build立一个angular度的价值： α = 2 * arctan(0.026/142) = 0.02098° where: α — […]