最近在學習html與css3基礎，看到有一節課用css3實現曲線陰影與翹邊陰影，便將這個做了出來。基本**實現如下：
學完這個知識點後，總結了一下用到的知識點，實質上做出來的陰影效果是讓陰影重疊。
1、陰影設定顏色和透明度時，用rgba,直接設定。
box-shadow:10px 10px 10px 10px;分別為水平，垂直距離，模糊程度，模糊距離，陰影值可為負值，代表著方向
box-shadow可設定乙個或多個陰影，多陰影設定時逗號隔開。
inset：內陰影
2、曲線陰影實現原理：在盒子本身後面再新增，用到：after與：before
:after 選擇器：在被選元素的後面插入內容 ：before 選擇器：在被選元素的前面插入內容 說明：需使用content屬性來指定要插入的內容
設定下面的陰影（紅色），為確定它的曲線陰影，需要設定其四個方向的值，讓自動計算它的位置。或者設定盒子的寬高。
3、border-radius:100px/10px;/*水平/
垂直方向的半徑
*/，不能用空格，
border-radius:100px10px;
，這樣設定顯示的是對角的半徑
4、曲線陰影效果=1個直角陰影+2個重疊的曲線陰影（2個重疊的曲線陰影要放在直角陰影的下面）
5、翹邊陰影，新增兩個盒子重疊，翹邊陰影是需要給盒子做變換的，翹邊陰影盒子變換成平行四邊形的寬度比直角陰影盒子的大，所以需要設定width;90%;因為陰影距頂部還有點距離所以設定height;80%;
翹邊，兩個盒子疊加，底部為平行四邊形
傾斜旋轉之後
6、overflow的作用是：如果在這個.box盒子中的內容或者width和height超出了.box設定的width和height，那麼超出的部分會隱藏並且不佔位置。 clear的作用是：清除.box左右兩邊的浮動，這樣無論螢幕尺寸多大，這個.box始終佔滿螢幕中的這一行位置。
css3陰影總結
容器設定陰影box shadow 語法 box shadow h shadow v shadow blur spread color inset 以上各屬性值的解析 h shadow 必需的。水平陰影的位置。允許負值 v shadow 必需的。垂直陰影的位置。允許負值 blur 可選。模糊距離 sp...
css3 邊框陰影 box shadow
box shadow是向盒子新增陰影。支援新增乙個或者多個。很簡單的一段 就實現了投影效果，酷斃了。我們來看下語法 box shadow x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色 投影方式 引數介紹 注意 inset 可以寫在引數的第乙個或最後乙個，其它位置是無效的。為元素設...
css3 漸變，陰影，過渡
opacity 透明度，值為0 1，越到1越不透明 rgba r,g,b,a rgb分別表示紅綠藍，可用正整數和分數表示，a是alpha透明度，取值0 1。rgba和opacity透明的不同在於rgba不影響盒子中的字，而opacity連字一起透明。顏色漸變 linear gradient poin...