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

這篇文章主要介紹了CSS3實現(xiàn)翹邊的陰影效果的代碼示例,這里所謂的翹邊的陰影就是指陰影分部不均而顯得像是被翹起來的那種效果,需要的朋友可以參考下
效果:
HTML代碼:
XML/HTML Code復制內容到剪貼板
- <div class="box shadow"></div>
CSS代碼:
CSS Code復制內容到剪貼板
- .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;/*內陰影*/
- }
- .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意思是在被選元素的內容前或后 插入內容
相關文章
css3實現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實例
下面小編就為大家?guī)硪黄猚ss3實現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-10- 下面小編就為大家?guī)硪黄P于CSS3文本陰影text-shadow屬性詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-08-08
- 這篇文章主要為大家詳細介紹了CSS3邊框的不同效果實現(xiàn)代碼,包括CSS3圓角邊框、盒陰影、邊界圖片的制作方法,感興趣的小伙伴們可以參考一下2016-07-01
- box-shadow圖層陰影屬性和text-shadow文字陰影屬性在用法上差不多,都以X軸和Y軸坐標系來控制陰影擴展,這里我們就來詳解CSS3的圖層陰影和文字陰影效果使用:2016-06-09
詳解CSS3的box-shadow屬性制作邊框陰影效果的方法
這篇文章主要介紹了CSS3的box-shadow屬性制作邊框陰影效果的方法,box-shadow屬性還是十分強大的,能設定陰影的水平或垂直位置,以及陰影的顏色和尺寸等,需要的朋友可以參考下2016-05-10- 這篇文章主要為大家詳細介紹了CSS3實現(xiàn)曲線陰影和翹邊陰影的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-03
CSS3實現(xiàn)千變萬化的文字陰影text-shadow效果設計
這篇文章主要介紹了CSS3實現(xiàn)千變萬化的文字陰影text-shadow效果設計的相關資料,感興趣的小伙伴們可以參考一下2016-04-26- 這篇文章主要介紹了CSS中文字鏤空、透明值、陰影效果設置示例小結,其中通過text-stroke-color透明值的設置可以讓文字在某些程度上更加柔和,需要的朋友可以參考下2016-03-07
- 下面小編就為大家?guī)硪黄?分鐘讓你掌握css3陰影、倒影、漸變小技巧(小編推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-15