使用CSS创建斜角图像

最近，我想要一个简单的CSS方法来为图像添加斜角效果。 创建具有正常起始边框（ 左下 ）的深度感很容易，但是我追求的效果实际上看起来像是图像的一部分 ，好像它是图像本身的斜面（ 右下 ）。

最终，我发现了四种不同的实现方式，每种方式都提供不同程度的支持：从仅在一种浏览器中可用的最简洁的方法，到可以回溯到IE6的所有应用中最强大的方法。

他们都在同一个核心校长上工作。 用于阴影的黑色边框和用于突出显示的白色边框被叠加在图像的顶部，然后与某种形式的不透明度混合在一起。 在每种情况下，不支持该技术的浏览器都只会正常显示图像。

技术1：在图像上使用生成的内容（ 演示 ）

• 优点：超净技术不需要额外的标记
• 缺点：仅适用于Opera

使用第一种技术，我们使用:after创建一个伪元素，然后将其样式设置为完美覆盖在图像之上。 然后，我们向覆盖的元素添加边框，并使用RGBA定义每种边框颜色：顶部和左侧边框为rgba(255,255,255,0.4),白色，不透明度为40％； 底部和右侧边框为rgba(0,0,0,0.4),黑色，不透明度为40％：

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 class="beveled" src="stormtroopers.jpg"     alt="A legion of Lego Stormtroopers, standing in formation." />

这项技术仅在Opera中有效，因为没有其他浏览器支持在<img>和<object>类的多媒体替换元素上生成的内容。 但是，由于我们只处理Opera，因此我们可以自由使用box-sizing和100%尺寸，而不必显式定义尺寸。（注意：所有这些示例中content属性的值都是unicode，添加空格，因为伪元素必须包含某些内容或未呈现。）

技术2：在包装元素上使用生成的内容（ 演示 ）

• 优点：支持的浏览器范围更广
• 缺点：需要其他标记和明确的尺寸

第二种技术与第一种技术基本相同，但是这次，对于不支持<img>本身的浏览器的浏览器，我们使用包装器<span>上的生成内容创建了overlay元素。 对于这项技术，我们还需要开始在wrapper元素和生成的内容上定义明确的尺寸（尽管我们可以在生成的内容上使用特定于供应商的box-sizing版本，但我们仍然必须定义包装的尺寸，因此我们也可以对两者都做同样的事情：

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 class="beveled">    <img src="stormtroopers.jpg"         alt="A legion of Lego Stormtroopers, standing in formation." /></span>

技术3：使用阴影代替边框（ 演示 ）

• 优点：最吸引人的技术
• 缺点：仅适用于Firefox 3.5或更高版本

第三种技术是从第二种技术转移过来的，在第二种技术中，不是使用RGBA边框，而是使用-moz-box-shadow:inset创建斜角效果。 由于框阴影效果具有alpha 渐变 （而不是在所有点上都具有相同的不透明度），因此总体效果更漂亮且更圆滑。 扩展半径参数可以巧妙地用于消除拐角清晰度。仅在Firefox 3.5或更高版本中支持此效果； 尽管Safari确实实现了box-shadow（如-webkit-box-shadow ），但不支持inset ：

span.beveled{    position:relative;    width:200px;    height:200px;    display:block;}span.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    width:200px;    height:200px;    -moz-box-shadow:-5px -5px 2px rgba(0,0,0,0.4) inset,                    5px 5px 2px rgba(255,255,255,0.4) inset;}

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

我想我们还是可以添加-webkit版本，以期实现向前兼容，但这是一个风险，因为我们不知道将来的实现会是什么样子-可能总比没有好！

技巧4：大家都很开心（ 演示 ）

• 优点：适用于所有现代浏览器
• 缺点：需要更多的附加标记和明确的尺寸

第四个也是最后一个技术是跨浏览器最兼容，但也需要最多的HTML修改。 它本质上与第二种技术相同，但有两个重要区别：首先，它使用第二种物理<span>而不是生成的内容； 其次，它使用普通的十六进制边框颜色而不是RGBA ，然后将整个元素与不透明度混合在一起。 甚至Internet Explorer也可以处理此问题：

span.beveled{    position:relative;    width:200px;    height:200px;    display:block;}span.beveled span{    position:absolute;    left:0;    top:0;    display:block;    width:190px;    height:190px;    border:5px solid;    border-color:#fff #000 #000 #fff;    filter:alpha(opacity=40);    opacity:0.4;}

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

进一步的发展

您可以通过使用彩色边框来获得类似凝胶的效果，甚至使用多个交错的叠加来创建更微妙或更复杂的效果，从而进一步实现这一目的。但是基本思想在这里，我希望您会发现它有用。 玩起来肯定很有趣！

From: https://www.sitepoint.com/creating-beveled-images-with-css/