邊框的技巧

一、半透明邊框

　　

　　background-color: yellow; border: 10px solid rgba(0,0,0,.1)；

　　但是，背景色會從邊框下面透上來。

　　優化辦法：剪下背景　background-clip: padding-box;  

二、多重邊框

　　1、使用陰影模擬多個邊框 　　　 　　　background-color: pink; box-shadow: 0px 0px 0px 10px #888888,0px 0px 0px 15px yellow; 　　　但是新增陰影並不會更改元素的寬高，所以必要時需要新增maging來模擬邊框。 　　2、使用輪廓模擬兩個邊框 　　　 　　　background-color: yellow; border: 5px solid #ccc; outline: red dotted 5px; 　　 三、邊框內圓角 　　1、複合使用陰影和輪廓（邊框設圓角，加上輪廓，中間的間隙通過陰影來填充） 　　　 　　　background: tan; border-radius: .8em; padding: 1em; box-shadow: 0 0 0 .6em #655;outline: .6em solid #655;
背景的技巧   一、有偏移量的背景圖片定位 　　1、使用background-position 　　　 　　　background: #ccc url(1.png) no-repeat; 　　　background-position: right 10px bottom 10px; 　　2、用calc()計算 　　　 　　　background：#ccc url(1.png) no-repeat; 　　　background-position: calc(100% - 20px) calc(100% - 20px); 　　3、改變定位的基準 　　　 　　　padding: 5px; 　　　background:  #ccc url(1.png) no-repeat right bottom; 　　　background-origin: centent-box;   二、製作條紋背景 　　　1、製作橫向條紋背景 　　　　 　　　　 background: linear-gradient(#ccc 50%,#555 50%); 　　　　background-size: 100% 30px; 　　　2、製作大小不一的橫向條紋背景 　　　　 　　　 　　　　background: linear-gradient(#ccc 30%,#555 0); 　　　　background-size: 100% 30px;  　　　3、製作多種顏色的橫向條紋背景 　　　　 　　　　background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0); 　　　　background-size: 100% 45px; 　　　4、製作垂直條紋 　　　　 　　　　background: linear-gradient(to right,#fb3 50%,#58a 0); 　　　　background-size: 30px 100%; 　　　5、製作斜向條紋 　　　　 　　　　background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0); 　　　　background-size: 30px 30px; 　　　6、製作60°的斜向條紋 　　　　 　　　 　　　　background: repeating-linear-gradient(60deg,#fb3, #fb3 15px, #58a 0, #58a 30px)     　　　7、同一色系的條紋                　　　　background: #444; 　　　　background-image: repeating-linear-gradient(30deg, 　　　　　　　　　　　　　　hsla(0, 0%, 100%, .1), 　　　　　　　　　　　　　　hsla(0, 0%, 100%, .1) 15px, 　　　　　　　　　　　　　　transparent 0, transparent 30px);