css box-shadow實現(xiàn)曲邊陰影與翹邊陰影

大家都知道box-shadow是h5新增屬性,用來實現(xiàn)盒子邊緣有陰影的效果,但經(jīng)常會看見許多場景里陰影的樣式各種各樣,并不是簡單的四周有陰影的效果,它們是怎么實現(xiàn)的呢,今天就跟大家分享兩種陰影實現(xiàn)的方法。
一、曲邊陰影
效果圖如下:它不僅是四周有陰影,下部還有一層曲邊的陰影,它的原理其實很簡單,首先盒子自身有陰影,然后在使用另一個有陰影的盒子重疊形成效果圖里的曲邊陰影。
首先說一下box-shadow的使用語法,它支持多個陰影的書寫,中間用逗號隔開,如下
創(chuàng)建一個盒子,使用box-shadow給盒子一個x軸和y軸方向都是零暈染半徑為10px的外陰影和內(nèi)陰影。
style{ .box1{ width: 400px; height: 200px; background: white; border: 1px solid lightgrey; margin: 100px auto; text-align: center; line-height: 200px; box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.3) inset; } } body{ <div class="box1"> <span>曲邊陰影</span> </div> }
使用after偽類選擇器在box1子集的后面增加一個虛擬的標簽,由于是一個虛擬標簽,瀏覽器不能識別,需要定義display屬性,給這個標簽也加上陰影,由于是曲面的,所以需要設(shè)置border-radius使它有個弧度。然后使用定位將虛擬標簽與原盒子重疊,并使用z-index改變層級,使它在div的下方。代碼如下
.box1::after{ display: block; //必須寫 content: ""; //必須寫 z-index: -1; width: 390px; height: 150px; background: red; position: absolute; bottom: 0; left: 4px; border-radius: 30px/10px; box-shadow: 0 8px 10px rgba(0,0,0,0.3); }
當(dāng)沒有定位時,兩個盒子的排列方式如下:
定位后就實現(xiàn)了曲邊陰影:結(jié)果圖如下:
二、翹邊陰影
原理與曲邊陰影一樣,使用偽類選擇器::afteryu , ::before增加兩個虛擬標簽,使用陰影的重疊實現(xiàn)翹邊陰影。
代碼如下:
.box2::after,.box2::before{ display: block; content: ""; z-index: -1; width: 170px; height: 240px; background: red; position: absolute; bottom: 20px; left: 38px; box-shadow: 30px 10px 40px rgba(0,0,0,0.5); transform: skewX(-15deg); } .box2::before{ box-shadow: -20px 10px 40px rgba(0,0,0,0.5); transform: skewX(15deg); }
為了方便我們看,給了紅色背景,沒改變層級時結(jié)果如下:
調(diào)整兩個盒子的層級,效果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 在開發(fā)中現(xiàn)在對于陰影效果的使用已經(jīng)越來越廣泛了,那么今天我們就來說一說用同樣的手法實現(xiàn)邊框陰影。下面腳本之家小編給大家?guī)砹薍tml/CSS前端實現(xiàn)文字邊框陰影效果,需2018-01-17
- 這篇文章主要介紹了使用Html5、CSS實現(xiàn)文字陰影效果的相關(guān)資料,需要的朋友可以參考下2018-01-17
- 這是一款由腳本之家翻譯自國外網(wǎng)站的在線CSS工具,可通過拖拽來調(diào)整生成盒子模型陰影效果的水平與垂直長度、模糊半徑、擴散半徑、不透明度等屬性,還可自由選擇陰影色、盒2017-09-19
css3 box-shadow陰影(外陰影與外發(fā)光)圖示講解
這篇文章主要介紹了css3 box-shadow陰影(外陰影與外發(fā)光),通過五個測試通過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下2017-08-11純css3使用transform屬性控制文字變形3D陰影效果源碼
這是一款基于純css3使用transform屬性控制文字變形3D陰影效果源碼。界面上的文字呈現(xiàn)出多層陰影漸變層疊出現(xiàn)的展示效果。主要通過css3的transform屬性實現(xiàn)。2017-06-09詳解CSS3陰影 box-shadow的使用和技巧總結(jié)
這篇文章主要介紹了詳解CSS3陰影 box-shadow的使用和技巧總結(jié) ,具有一定的參考價值,有需要的可以了解一下。2016-12-03- 下面小編就為大家?guī)硪黄?分鐘讓你掌握css3陰影、倒影、漸變小技巧(小編推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-15
css3實現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實例
下面小編就為大家?guī)硪黄猚ss3實現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-10css實現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果
這篇文章主要介紹了css實現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-22