Css3新特性總結之邊框與背景(二)

一、條紋背景

• 利用background為linear-gradient函數實現，linear-gradient取值如下：
  • <angle>：角度，漸變的方向
  • to left right top bottom
  • color：指定顏色
  • color-stop：指定漸變的起止顏色
  • length：用長度值指定起止色的位置，不可為負值
  • percentage：用百分比指定起止色的位置
  • 語法格式：linear-gradient([[<angle>|to <side-to-corner>],]? <color-stop>[,<color-stop>]+)
  • side-to-corner：[left|right] || [top||bottom]
  • color-stop: <color>[<length>|<percentage>]?
• 示例代碼(斜角條紋)：

background: linear-gradient( 40deg, #fb3 5px, #58a 15px);
width: 200px;
height: 100px;
margin: 0px auto;
background-size: 30px 30px;

• 當linear-gradient添加多組值的時候，前面的值會覆蓋後面的，如下代碼：

background-image:linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0)

說明:linear-gradient(45deg, transparent 75%, #bbb 0)的信息會被linear-gradient(45deg, #bbb 25%, transparent 0) 覆蓋。

• 示例代碼：

width: 200px;
            height: 200px;
            background: #eee;
            background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, #bbb 0),
            linear-gradient(45deg, #bbb 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, #bbb 0);
            background-position: 0px 0px, 12.5px 12.5px, 12.5px 12.5px, 25px 25px;
            background-size: 25px 25px;

代碼解釋:

* image與position一對一的相互參照；image實現圖形，position實現定位
* 每個圖形都是一個小的三角形，兩個三角形相互拼接成一個正方形，然後近一步定位即可。
* 註意角度的旋轉，他是順時針的。

• linear-gradient還可以合併寫法，也就是定義一個角度，後面跟隨多組顏色值

linear-gradient(45deg, #bbb 25%, transparent 0, 
\transparent 50%, #bbb 0, transparent 75%, #bbb 0)

• css可以用\（反斜杠）進行換行，如上
• 不規則條紋
  • 主要利用background-size多組值實現，第組值按照自定的間距進行平鋪
  • 最與數學中的最大公約倍數有關聯，他們會以最大分倍數的寬度重覆, 如果讓他看上去更隨機就需要避開此條規則
  • 示例代碼：

.wrap{
            width: 600px;
            height: 100px;
            background: hsl(20, 40%, 90%);
            background-image: 
                linear-gradient(90deg,#fb3 10px, transparent 0),
                linear-gradient(90deg,#ab4 20px, transparent 0),
                linear-gradient(90deg,#655 30px, transparent 0);
            background-size: 40px 100%, 60px 100%, 80px 100%;
        }
        .wrap-thr{
            margin-top: 5px;
            width: 600px;
            height: 100px;
            background: hsl(20, 40%, 90%);
            background-image: 
                linear-gradient(90deg,#fb3 10px, transparent 0);
            background-size: 40px 100%;
        }
        .wrap-one{
            margin-top: 5px;
            width: 600px;
            height: 100px;
            background: hsl(20, 40%, 90%);
            background-image:linear-gradient(90deg,#ab4 20px, transparent 0);
            background-size: 60px 100%;
        }
        .wrap-two{
            margin-top: 5px;
            width: 600px;
            height: 100px;
            background: hsl(20, 40%, 90%);
            background-image:linear-gradient(90deg,#655 30px, transparent 0);
            background-size: 80px 100%;
        }

• 複雜邊框背景
• 方案一 利用border-image實現，border-image使用的是九宮格伸縮法
• 方案二 利用背景多層覆蓋原理實現，先實現多層有顏色的背景，最後加上一層白色的。

.wrap{
            width: 200px;
            height: 50px;
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white,white) padding-box,
            repeating-linear-gradient(-45deg,red 0, red 12.5%, 
            \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
        }
        .wrap-one{
            margin-top: 5px;
            width: 200px;
            height: 50px;
            padding: 1em;
            border: 1em solid transparent;
            background:             repeating-linear-gradient(-45deg,
            \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
        } 
        .wrap-two{
            margin-top: 5px;
            width: 200px;
            height: 50px;
            padding: 1em;
            border: 1em solid transparent;
            background:  
            repeating-linear-gradient(-45deg, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
        }
        .wrap-thr{
            margin-top: 5px;
            width: 200px;
            height: 50px;
            padding: 1em;
            border: 1em solid transparent;
            background:             repeating-linear-gradient(-45deg,transparent 0, red 50%) 0 / 5em 5em;
        }