Width: 100px; Height: 100px;
Border: 12px solid blue; Background-color: orange;
Border-top-left-radius: 60px 90px;
Border-bottom-right-radius: 60px 90px;
Box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
 12px 12px 0px 8px rgba(0,0,0,0.4) inset;
 
有趣的語法~可以套上試用功能,就大概能知道了~~!!
陰影邊線功能

框框外陰影(下px 右px 暈染程度px 實體線px)
 box-shadow:
  rgba(0,0,0,0.4)
  3px 3px 15px 0px; 
 
框框內陰影inset (上px 左px 暈染程度px 實體線px) 
 box-shadow:
  rgba(0,0,0,0.4)
  3px 3px 15px 0px
  inset;  

外邊框+內邊框 
box-shadow: rgba(0,0,0,0.4) 2px 2px 5px 0px,  rgba(0,0,0,0.4) 3px 3px 15px 0px inset;

外邊框+內邊框box-shadow: rgba(0,0,0,0.4) 2px 2px 5px 0px /* spread */,  rgba(0,0,0,0.4) 3px 3px 15px 0px /* spread */ inset; 
 



參考資料:http://www.w3.org/TR/css3-background/#corner-transitions 

http://boohover.pixnet.net/blog/post/35116159-%E9%99%B0%E5%BD%B1%E6%95%88%E6%9E%9C%E5%8F%8A%E5%85%89%E6%9A%88%E6%95%88%E6%9E%9C%E7%9A%84-box-shadow-(css-property) 
文章標籤
全站熱搜
創作者介紹
創作者 YinMengWu 的頭像
YinMengWu

YinMengWu

YinMengWu 發表在 痞客邦 留言(0) 人氣(5,698)