CSS3實(shí)現(xiàn)翹邊的陰影效果的代碼示例
segmentfault 發(fā)布時(shí)間:2016-06-13 12:04:13 作者:trigkit4
我要評(píng)論

這篇文章主要介紹了CSS3實(shí)現(xiàn)翹邊的陰影效果的代碼示例,這里所謂的翹邊的陰影就是指陰影分部不均而顯得像是被翹起來(lái)的那種效果,需要的朋友可以參考下
效果:
HTML代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div class="box shadow"></div>
CSS代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- .box {
- width: 300px;
- height: 100px;
- background: #ccc;
- border-radius: 10px;
- margin: 10px;
- }
- .shadow {
- position: relative;
- max-width: 270px;
- box-shadow: 0px 1px 4px rgba(0,0,0,0.3),/* 外陰影*/
- 0px 0px 20px rgba(0,0,0,0.1) inset;/*內(nèi)陰影*/
- }
- .shadow::before,
- .shadow::after {
- content:"";
- position:absolute;
- z-index:-1;
- }
- .shadow::before,
- .shadow::after {
- content:"";
- position:absolute;
- z-index:-1;
- bottombottom:15px;
- left:10px;
- width:50%;
- height:20%;
- }
- .shadow::before,
- .shadow::after {
- content:"";
- position:absolute;
- z-index:-1;
- bottombottom:15px;
- left:10px;
- width:50%;
- height:20%;
- box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
- transform:rotate(-3deg);
- }
- .shadow::after{
- rightright:10px;
- left:auto;
- transform:rotate(3deg);
- }
偽元素before和after意思是在被選元素的內(nèi)容前或后 插入內(nèi)容
相關(guān)文章
css3實(shí)現(xiàn)漸變、陰影、超出指定文本省略號(hào)顯示等一些效果實(shí)例
下面小編就為大家?guī)?lái)一篇css3實(shí)現(xiàn)漸變、陰影、超出指定文本省略號(hào)顯示等一些效果實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-10- 下面小編就為大家?guī)?lái)一篇關(guān)于CSS3文本陰影text-shadow屬性詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-08-08
- 這篇文章主要為大家詳細(xì)介紹了CSS3邊框的不同效果實(shí)現(xiàn)代碼,包括CSS3圓角邊框、盒陰影、邊界圖片的制作方法,感興趣的小伙伴們可以參考一下2016-07-01
- box-shadow圖層陰影屬性和text-shadow文字陰影屬性在用法上差不多,都以X軸和Y軸坐標(biāo)系來(lái)控制陰影擴(kuò)展,這里我們就來(lái)詳解CSS3的圖層陰影和文字陰影效果使用:2016-06-09
詳解CSS3的box-shadow屬性制作邊框陰影效果的方法
這篇文章主要介紹了CSS3的box-shadow屬性制作邊框陰影效果的方法,box-shadow屬性還是十分強(qiáng)大的,能設(shè)定陰影的水平或垂直位置,以及陰影的顏色和尺寸等,需要的朋友可以參考下2016-05-10- 這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)曲線陰影和翹邊陰影的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-03
CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)
這篇文章主要介紹了CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-04-26CSS3中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié)
這篇文章主要介紹了CSS中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié),其中通過(guò)text-stroke-color透明值的設(shè)置可以讓文字在某些程度上更加柔和,需要的朋友可以參考下2016-03-07- 下面小編就為大家?guī)?lái)一篇5分鐘讓你掌握css3陰影、倒影、漸變小技巧(小編推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-15