CSS 翹邊陰影的實現(xiàn)代碼
發(fā)布時間：2018-06-15 15:22:16 作者：滑滑兔 
我要評論
我要評論這篇文章主要介紹了CSS 翹邊陰影的實現(xiàn)代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了CSS 翹邊陰影的實現(xiàn)代碼，分享給大家。具體如下：
仔細觀察可以看到每張圖片下面的兩個角都有不同程度的翹邊。
實現(xiàn)原理和【CSS】曲線陰影差不多，也是通過偽元素來實現(xiàn)。
HTML代碼
<ul class="box">
<li><img src="......" alt=""></li>
<li><img src="......" alt=""></li>
<li><img src="......" alt=""></li>
</ul>
CSS代碼
ul,li {
list-style:none;
}
.box {
width: 980px;
height: auto;
clear: both;
overflow: hidden;
margin: 20px auto;
}
.box li {
width: 300px;
height: 210px;
position: relative;
background: #fff;
float: left;
margin: 20px 10px;
border: 2px solid #efefef;
box-shadow: 0 1px 4px rgba(0, 0, 0, .27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
}
.box li img {
display: block;
width: 290px;
height: 200px;
margin: 5px;
}
.box li:before, .box li:after {
content: '';
position: absolute;
z-index: -2;
width: 80%;
height: 80%;
bottom: 8px;
background: transparent;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
}
.box li:before {
left: 7%;
transform: skewX(-12deg) rotate(-4deg);
}
.box li:after {
right: 7%;
transform: skewX(12deg) rotate(4deg);
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了CSS 陰影動畫優(yōu)化技巧,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-31
JS+css3實現(xiàn)帶陰影可點擊旋轉(zhuǎn)的3D立體杯子效果源碼
這是一款基于JS+css3實現(xiàn)帶陰影可點擊旋轉(zhuǎn)的3D立體杯子效果源碼。畫面上依次擺放著白、紅、藍三個顏色的杯子，點擊各個杯子可看到杯子原地轉(zhuǎn)動，并且顯露出杯子背面的圖案2019-10-15
CSS陰影效果的比較之drop-Shadow與box-Shadow
這篇文章主要介紹了CSS陰影效果的比較之drop-Shadow與box-Shadow，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2019-05-23
我們在瀏覽網(wǎng)頁的時候，有些時候會看到某些區(qū)塊或者某些圖片邊框家里炫酷的陰影，本篇文章主要介紹了CSS 曲線陰影實現(xiàn)的示例代碼，感興趣的小伙伴們可以參考一下2018-06-15
這篇文章主要介紹了css實現(xiàn)懸浮效果的陰影的方法示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-23
這篇文章主要介紹了css實現(xiàn)多邊形和梯形盒陰影技巧的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-20
本文通過實例代碼給大家介紹了CSS中使用文本陰影與元素陰影效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2020-01-18
