使用CSS创建斜面图像

钥匙要点

• >有四种不同的技术用于创建使用CSS的斜面图像，每个技术都提供不同级别的浏览器支持。所有方法均基于在图像上覆盖黑白边界并与不透明度融合的相同原理。
>第一个技术使用图像上生成的内容，仅在歌剧中起作用。第二种技术使用包装元素上生成的内容，提供更广泛的浏览器支持。第三种方法利用阴影而不是边界，仅在Firefox 3.5或更高版本中得到支持。第四种方法是兼容最多的跨浏览器，但需要更多的HTML修改。
• 斜面图像可以通过添加深度和现实感来增强网络设计的视觉吸引力。可以通过操纵图像或元素的边框特性来实现此效果。可以使用其他CSS3属性（例如盒子阴影和边框图像）来创建更复杂和逼真的斜面效果。
• 最近，我想要一种简单的CSS
方法，可以在图像中添加斜面效果。它很容易在正常的启动边界（在左下方

下方）中营造出深度感，但是我正在追求的效果实际上看起来像图像的一部分，好像它是图像本身上的斜角（>右下>下方）。>>>

最终的级别ploct 。他们所有人都在同一核心校长上工作；黑色边框用于阴影和白色边框以突出显示在图像的顶部，然后与某种形式的不透明度混合。在每种情况下，不支持该技术的浏览器都会简单地将图像显示为正常的图像。

技术1：在图像（Demo）

>

img.beveled{    position:relative;}img.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    box-sizing:border-box;    width:100%;    height:100%;    border:5px solid;    border-color:rgba(255,255,255,0.4)                 rgba(0,0,0,0.4)                 rgba(0,0,0,0.4)                 rgba(255,255,255,0.4);}

<img  src="stormtroopers.jpg"     alt="A legion of Lego Stormtroopers, standing in formation." />

优点：超纯技术中不需要其他标记

span.beveled{    position:relative;    width:200px;    height:200px;    display:block;}span.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    width:190px;    height:190px;    border:5px solid;    border-color:rgba(255,255,255,0.4)                 rgba(0,0,0,0.4)                 rgba(0,0,0,0.4)                 rgba(255,255,255,0.4);}

<span > <img src="stormtroopers.jpg" alt="A legion of Lego Stormtroopers, standing in formation." /></span>定义每个边框颜色：顶部和左边框是RGBA（255,255,255,0.4），白色为白色，不透明度为40％；底部和右边框是RGBA（0,0,0,0.4），黑色，具有40％不透明度：

>

>此技术仅在歌剧中起作用，因为没有其他浏览器支持在多媒体替代元素（如> 和 and

以上是使用CSS创建斜面图像的详细内容。更多信息请关注PHP中文网其他相关文章！