添加到百度首頁
添加收藏 RSS 網站地圖 舊版網站
  • 全部
  • 網頁特效
  • 建站教程
  • 設計分享
當前位置:首頁 > 建站教程 > HTML5+CSS3 >

CSS3-Box-shadow陰影效果用法趣味講解

時間:2014-03-21      來源:互聯網     

隨著技術的發展,代碼在不斷的進步,進而替代一些圖片所能實現的效果,其中CSS3屬性中“Box-shadow”表現陰影效果是現代瀏覽器中是一個非常有用的技巧,通過它我們可以做出很多非常酷的東西。讓我們來一步一步的了解box-shadow屬性的基本用法,然后進一步了解::before和::after偽元素的用法。

一、基本用法:

CSS3-Box-shadow陰影效果用法趣味講解
 
CSS設置:
box-shadow:2px 2px 5px #000;
 
CSS設置:
box-shadow:0px 0px 10px #000;

二、內陰影用法:
CSS3-Box-shadow陰影效果用法趣味講解
 
CSS設置:
box-shadow:inset 2px 2px 5px #000;

三、陰影擴展長度值
CSS3-Box-shadow陰影效果用法趣味講解
 
CSS設置:
box-shadow:0px 0px 5px 10px #000;
 
CSS設置:
box-shadow:0px 15px 10px -15px #000;
 
CSS設置:
box-shadow:inset 0px 15px 10px -15px #000;

四、多重投影
 
CSS設置:
box-shadow:0px 0px 0px 3px #bb0a0a,
0px 0px 0px 6px #2e56bf,
0px 0px 0px 9px #ea982e;

五、偽元素::before和::after的樂趣

使用偽元素::before和::after,我們能創造出非常逼真的只有圖片才能實現的陰影效果。讓我來看一個例子:

 
HTML代碼:
<div class="box11 shadow lazy "></div>
CSS設置:

.box11 {
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;
bottom:15px;
left:10px;
width:50%;
height:20%;
}

.shadow::before,
.shadow::after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(-3deg);
}

.shadow::after{
right:10px;
left:auto;
transform:rotate(3deg);
}

更多CSS3網站建設教程:www.wiwgwy.live
相關文章
web前端視頻教程


大家都在看

最新更新

web前端視頻教程
彩票中奖指 新手炒股入门 034期特码资料 沈阳盛京棋牌完整版 福彩双色球基本走势图彩票大赢家 球探网nba比分直播 股票推荐网站 内蒙古十一选五开奖结果走势图 福建体育彩票36选7开奖结果 体彩辽宁11选5中奖结果 七星彩规律视频17132期 瑞娜透码 股票涨跌是人为控制吗 极速十一选五走势图 2018海南环岛赛具体时间 游戏试玩赚钱黑幕 在线购买广东11选5