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)
文章標籤
全站熱搜
