CSS3實現「圖片陰影」效果
- 2019 年 12 月 13 日
- 筆記
利用多投影重疊的原理，實現曲線陰影與翹邊陰影的效果，花一個小時看完的課程，理解的似懂非懂。直接發一下老師寫的成品吧。用到來取。css都補上了注釋。
- 第1章曲線陰影的實現 1-1效果演示 1-2結構編寫 1-3原理分析 1-4 box-shadow講解 1-5 主陰影(內陰影外陰影 ) 1-6 after與before講解 1-7曲線陰影
- 第2章翹邊陰影的實現 2-1翹邊陰影
效果
HTML
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>box-shadow</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrap effect"> <h3>Shadow Effect</h3> </div> <ul class="box"> <li><img src="images/photo1.jpg"/></li> <li><img src="images/photo2.jpg"/></li> <li><img src="images/photo3.jpg"/></li> </ul> </body> </html>
CSS
body{font-family:Arial;/* 字體 */ font-size:23px;}/* 字號 */ .wrap h3{ text-align:center;/* 位置居中 */ position:relative;/* 定位對象不可層疊 */ top:80px;/* 距離頂部距離 */ } .wrap { width:70%;/* 寬 */ height:200px;/* 高 */ background:#FFF;/* 背景顏色 */ margin:40px auto;/* 外邊距 */ } .effect{ position:relative; /* 定位類型 */ -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;/* 外投影和內投影 */ -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset; } .effect:before, .effect:after{ content:"";/* 盒子內容 */ position:absolute; /* 定位類型 */ z-index:-1;/* 盒子層 */ -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);/* 外投影和內投影 */ -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; /* 盒子距離頂部距離 */ bottom:0; /* 盒子距離底部距離 */ left:10px; /* 盒子距離左側距離 */ right:10px; /* 盒子距離右側距離 */ /* 這裡也可以直接寫和盒子的大小width和height */ border-radius:100px / 10px;/* 圓角半徑 / 斜切圓角 */ -moz-border-radius:100px / 10px; /* 效果同上,為了兼容部分瀏覽器 */ } ul.box { width:980px;/* 寬 */ height:auto;/* 高 */ margin: 20px auto;/* 定位 邊距 */ padding: 0;/* 定義內邊距為0 */ clear: both;/* 在左右兩側均不允許浮動元素。 */ /* left 在左側不允許浮動元素。 right 在右側不允許浮動元素。 both 在左右兩側均不允許浮動元素。 none 默認值。允許浮動元素出現在兩側。 inherit 規定應該從父元素繼承 clear 屬性的值。 */ overflow: hidden; /* 溢出的值會被修剪 */ } ul.box li { list-style-type: none;/* 在一個聲明中設置所有的列表屬性 無標記。 */ margin:20px 10px;/* 定位 邊距 上下右左*/ padding: 0;/* 內邊距 */ width: 300px;/* 寬 */ height: 220px;/* 高 */ border: 2px solid #efefef;/* 邊框 寬度 顏色 */ position: relative;/* 定位類型 */ float: left;/* 元素向左浮動。 */ background: #ffffff; /* old browsers *//* 背景顏色 */ line-height:220px;/* 設置行高： */ font-size:32px;/* 字號 */ text-align:center;/* 文字對齊方式 */ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;/* 外投影和內投影 */ -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; } ul.box li:before { z-index: -2; /* 層數 */ position: absolute; /* 定位屬性,絕對定位 */ background: transparent; /* 背景顏色,transparent為透明色 */ width: 90%; /* 寬90% */ height: 80%; /* 高80% */ content: ''; /* 盒子內容 */ left: 20px; /* 盒子距離左側距離 */ bottom:8px; /* 盒子距離底部距離 */ -webkit-transform: skew(-12deg) rotate(-4deg); /* 盒子變形 */ -moz-transform:skew(-12deg) rotate(-4deg); -o-transform: skew(-12deg) rotate(-4deg); -ms-transform: skew(-12deg) rotate(-4deg); -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* 外投影和內投影 */ -moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); -o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); } ul.box li:after { /* 底層陰影第二個 */ z-index: -1; /* 層數 */ position: absolute; /* 定位屬性,絕對定位 */ background: transparent; /* 背景顏色,transparent為透明色 */ width: 90%; /* 寬90% */ height: 80%; /* 高 */ content: ''; /* 盒子內容 */ right:20px; /* 盒子距離左側距離 */ bottom:8px; /* 盒子距離底部的距離 */ -webkit-transform: skew(12deg) rotate(4deg); /* 盒子變形 */ -moz-transform:skew(12deg) rotate(4deg); -o-transform: skew(12deg) rotate(4deg); -ms-transform: skew(12deg) rotate(4deg); -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* 外投影和內投影 */ -moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); -o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); } .box li img{ /* 定義圖片大小:統一圖片大小格式 */ width:290px; /* 圖片寬 */ height:210px; /* 圖片高 */ padding:5px; /* 距離盒子內邊距 */ }
