现在我想要相信一切皆有可能,当我看到CSS的强大功能时 - 使用块元素制作不规则形状,即triangles,chamfered CSS Border Corners - 如何容易但多么热情!所以我试着去做一些事情,我认为可以通过CSS的一些知识来实现。
div.image{
width: 18px;
height: 18px;
background: url(images/image-sprite.png) -70px 0;
display: inline-block;
}
假设我放置了一个宽度和高度为18px的“图像精灵”()。但我调用的图像不是18px x 18px的盒形图像,假设图像是圆形或一些不规则形状。当我将box-shadow
放入div时,它突出显示为一个框,当我放置text-shadow
时,它不起作用,因为div / anchor元素中不包含任何文本。
如果我想将阴影放在元素上,而不是放在容器上(如盒状HTML元素),如图所示,阴影到无背景图像的轮廓 - 那么:
注意:我知道,当我有无背景的图像和Photoshop时,我可以在几乎任何元素中添加必要的阴影。但我问了一个问题,如果这样的东西可以用原始CSS实现,那么对我们来说这将是一项了不起的成就。
答案 0 :(得分:3)
新的CSS过滤器允许您这样做,但浏览器支持不是很深。
<div class="image">
<img src="http://www.equissage.co.uk/wp/wp-content/uploads/2010/08/equissage-red-horse.png" alt="" />
</div>
.image img {
width:400px;
-webkit-filter: drop-shadow(4px 4px grey);
}
答案 1 :(得分:0)
执行所要求的唯一方法是使用css或使用图标字体重新创建形状。
因为想要边框阴影的元素是图像,所以它们总是变成正方形或矩形。