1. 程式人生 > >二、背景和邊框

二、背景和邊框

 邊框的技巧

一、半透明邊框

  

  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);