欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS 翹邊陰影的實(shí)現(xiàn)代碼

  發(fā)布時(shí)間：2018-06-15 15:22:16   作者：滑滑兔   我要評論
這篇文章主要介紹了CSS 翹邊陰影的實(shí)現(xiàn)代碼的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了CSS 翹邊陰影的實(shí)現(xiàn)代碼，分享給大家。具體如下：

仔細(xì)觀察可以看到每張圖片下面的兩個(gè)角都有不同程度的翹邊。

實(shí)現(xiàn)原理和【CSS】曲線陰影差不多，也是通過偽元素來實(shí)現(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 陰影動(dòng)畫優(yōu)化技巧

    這篇文章主要介紹了CSS 陰影動(dòng)畫優(yōu)化技巧,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-10-31

  • JS+css3實(shí)現(xiàn)帶陰影可點(diǎn)擊旋轉(zhuǎn)的3D立體杯子效果源碼

    這是一款基于JS+css3實(shí)現(xiàn)帶陰影可點(diǎn)擊旋轉(zhuǎn)的3D立體杯子效果源碼。畫面上依次擺放著白、紅、藍(lán)三個(gè)顏色的杯子，點(diǎn)擊各個(gè)杯子可看到杯子原地轉(zhuǎn)動(dòng)，并且顯露出杯子背面的圖案
    2019-10-15

  • CSS陰影效果的比較之drop-Shadow與box-Shadow

    這篇文章主要介紹了CSS陰影效果的比較之drop-Shadow與box-Shadow，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小
    2019-05-23

  • CSS 曲線陰影實(shí)現(xiàn)的示例代碼

    我們在瀏覽網(wǎng)頁的時(shí)候，有些時(shí)候會(huì)看到某些區(qū)塊或者某些圖片邊框家里炫酷的陰影，本篇文章主要介紹了CSS 曲線陰影實(shí)現(xiàn)的示例代碼，感興趣的小伙伴們可以參考一下
    2018-06-15

  • css實(shí)現(xiàn)懸浮效果的陰影的方法示例

    這篇文章主要介紹了css實(shí)現(xiàn)懸浮效果的陰影的方法示例的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-23

  • css實(shí)現(xiàn)多邊形和梯形盒陰影技巧

    這篇文章主要介紹了css實(shí)現(xiàn)多邊形和梯形盒陰影技巧的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-20

  • CSS中使用文本陰影與元素陰影效果

    本文通過實(shí)例代碼給大家介紹了CSS中使用文本陰影與元素陰影效果，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2020-01-18

最新評論