Tag: css3

SVG阴影使用css3: 是否有可能使用css3为svg元素设置阴影，如 box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; 我看到一些关于使用滤镜效果创build阴影的评论。有没有单独使用CSS的例子。下面是一个工作代码，正确应用cusor风格，但没有阴影效果。请帮我用最less的代码获得阴影效果。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <style type="text/css" media="screen"> svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; } </style> </head> <body> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <svg […]

如何为同一字体添加多个字体文件？: 我正在查看@ font-face CSS规则的MDC页面，但我没有得到一件事。我有单独的文件大胆，斜体和大胆+斜体。我怎样才能在一个@ font-face规则中embedded所有三个文件？例如，如果我有： @font-face { font-family: "DejaVu Sans"; src: url("./fonts/DejaVuSans.ttf") format("ttf"); } strong { font-family: "DejaVu Sans"; font-weight: bold; } 浏览器将不知道用什么字体为粗体（因为该文件是DejaVuSansBold.ttf），所以它将默认为我可能不想要的东西。我怎样才能告诉浏览器我有一个特定的字体的所有不同的变种？

CSS3透明度+渐变: RGBA是非常有趣的，所以是-webkit-gradient ， -moz-gradient和呃… progid:DXImageTransform.Microsoft.gradient …是的。 🙂 有没有办法将RGBA和渐变这两者结合起来，以便使用当前/最新的CSS规范来实现alpha透明度的渐变。

css变换，在铬中锯齿状的边缘: 我一直在使用CSS3转换旋转图像和文本框在我的网站边框。问题在于，Chrome浏览器中的边框看起来十分粗糙，就像没有抗锯齿function的（低分辨率）游戏一样。在IE中，Opera和FF看起来好多了，因为使用了AA（这仍然清晰可见但并不那么糟糕）。我无法testingSafari，因为我没有Mac。旋转的照片和文字本身看起来不错，只是看起来锯齿状的边框。我使用的CSS是这样的： .rotate2deg { transform: rotate(2deg); -ms-transform: rotate(2deg); /* IE 9 */ -webkit-transform: rotate(2deg); /* Safari and Chrome */ -o-transform: rotate(2deg); /* Opera */ -moz-transform: rotate(2deg); /* Firefox */ } 有什么办法可以解决这个问题，例如强迫Chrome使用AA？示例如下：

如何在CSS中制作这个箭头？: 我正在build立一个类似向导的订购stream程，在这里我有这个菜单：活动页面呈绿色（在这种情况下，模型）。如何只使用CSS来制作这个箭头？目前，我通过使用多个div和图像来实现我的目标： <div class="menuItem"> <div></div> <!– The left image –> <div>Varianten</div> <div></div> <!– The right image –> </div> 左图：正确的形象：我find了一个这样做的SO回答：带有CSS的箭头框，但是我在左边的缩进处遇到麻烦。如果您对如何做到这一点有更好的了解，请让我知道！

如何在CSS中select具有特定类名的“最后一个孩子”？: <ul> <li class="list">test1</li> <li class="list">test2</li> <li class="list">test3</li> <li>test4</li> </ul> 如何selectclass级名称列表中的“最后一个孩子”？ <style> ul li.list:last-child{background-color:#000;} </style> 我知道上面的例子不起作用，但有什么类似的这个工作吗？重要： a）我不能使用ul li:nth-child(3) ，因为它可能发生在第四或第五位。 b）没有JavaScript。任何帮助将不胜感激，谢谢！

为什么z-index不起作用？: 所以，如果我正确理解z-index ，那么在这种情况下是完美的：我想把底部的图像（标签/卡）放在它上面的div下面。所以你不能看到锋利的边缘。我如何做到这一点？ z-index:-1 // on the image tag/card 要么 z-index:100 // on the div above 也不起作用。也不是这样的任何组合。怎么来的？

如何通过CSS在UL / LI html列表中设置Bullet颜色，而不使用任何图像或span标签: 想象一下包含一些<li>项目的简单未sorting列表。现在，我已经通过list-style:square;定义了子弹正方形list-style:square; 但是，如果我使用颜色设置<li>项目的color: #F00; 那么一切都变红了！虽然我只想设置方形子弹的颜色。有没有一个优雅的方式来定义在CSS中的项目符号的颜色… …不使用任何精灵图像或跨度标签！ HTML <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> CSS li{ list-style:square; }

用CSS设置背景图像的大小？: 是否有可能设置CSS的背景图像的大小？我想做一些事情： background: url('bg.gif') top repeat-y; background-size: 490px; 但是这样做似乎是完全错误的…

删除多行弹性项目之间的空间（空白）时，它们包装: 我正在尝试在一个设定高度的容器中放置一些物品。如果没有剩余的空间，物品将会彼此相邻。这是这个想法：我正在尝试使用flexbox来实现这一点，一个具有设置高度的容器，方向被设置为column并且flex-wrap被wrap ：问题是各栏之间有很大的差距。我尝试设置justify-content和align-items到flex-start ，但这可能是默认值。有什么办法可以解决这个问题吗？这里是代码： * { box-sizing: border-box; } body { font-family: sans-serif; } .container { display: flex; flex-wrap: wrap; height: 300px; flex-direction: column; background-color: #ccc; } .items { width: 100px; height: 100px; margin: 10px; background-color: tomato; color: white; font-size: 60px; font-weight: bold; text-align: center; padding: 15px; } <div […]