<address id="rzl99"></address>
<noframes id="rzl99">

      <address id="rzl99"></address>
      <var id="rzl99"><nobr id="rzl99"><th id="rzl99"></th></nobr></var>

      <form id="rzl99"><nobr id="rzl99"></nobr></form>

          <noframes id="rzl99">

          北京網站建設公司,專注于為企業提供高端網站定制開發及解決方案服務!

          全國服務熱線 138 1177 7897 在線咨詢 留言/需求提交

          CSS3的背景顏色background漸變代碼

          【摘要】畫了幾個漂亮的漸變色,暫時不考慮兼容性問題了,嘿嘿。 代碼: background-image: linear-gradient(0deg, #fff 0%,#000 100%); 上面是主代碼,括號···

              畫了幾個漂亮的漸變色,暫時不考慮兼容性問題了,嘿嘿。

              代碼:

              background-image: linear-gradient(0deg, #fff 0%,#000 100%);

              上面是主代碼,括號內的0deg是角度,后面跟著一個顏色和顏色開始的位置,后面跟著另一個顏色和顏色結束的位置,可以寫很多個顏色,標注好位置就好。

              樣式1

              

              background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);

              樣式2

              css3 的background 漸變

              background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);

              樣式3

              

              background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);

              樣式4

              css3 的background 漸變

              background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);

              樣式5

              css3 的background 漸變

              background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);

              樣式6

              css3 的background 漸變

              background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);

              線性漸變:

              background:linear-gradient(設置漸變形式,第一個顏色起點,中間顏色點 中間顏色的位置,結束點顏色);

              Linear:漸變的類型(線性漸變);

              漸變的形式:可選參數 有兩種方式-1、設置旋轉角度,0度代表水平從左到右,90度就是從上到下啦,從0度開始逆時針變換。

              使用關鍵字,left代表從左到右,top代表從上到下,同理right就是從右到左,lefttop-從坐上到右下,同理leftbottom,righttop,rightbottom。

              中間顏色與中間顏色位置為可選參數。

              不過要考慮瀏覽器的兼容,咱們這樣寫:

              -webkit-gradient(linear,0  0,0  100%,from(起始顏色,to(結束顏色));  /*for Safari4+,Chrome 2+*/

              -webkit-linear-gradient(起始顏色, 結束顏色);  /*for Safari 5.1+,Chrome 10+*/

              -moz-linear-gradient(起始顏色, 結束顏色);  /*for firefox*/

              -o-linear-gradient(起始顏色, 結束顏色);  /*Opera*/

              linear-gradient(起始顏色, 結束顏色);  /*標準屬性*/

          標簽: css漸變背景

          建站資訊文章推薦閱讀

          文章排行

          日本护士xxxx爽爽爽