使用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中文網其他相關文章！