2019獨角獸企業重金招聘Python工程師標準>>>

知道CSS3有新的屬性叫linear-gradient，但是基本的線性漸變效果不太好看，加上平時沒有在項目中用過這個 新屬性，因此掌握的不好，今天朋友問我這個問題：

這樣的背景圖怎么做，然后我就說用背景圖唄。然后又轉念一想，css3是完全可以實現這個效果的，就試著寫了一下，

html:

<div></div>

css:

div{

width:300px;

height:200px;

background:linear-gradient(top, red ,blue);

}

我能一下想到的漸變的寫法就是這樣。

但是慘了，這樣出來的效果是漸變的啊：

?

給他變成：0-50%是紅色 50%-50% 是紅的漸變成藍色，50%-100% 是藍色，就是不用漸變了啊。

寫成：background: linear-gradient(top, red ,red 50%,blue 50%,blue);

?

biubiu~biu 變成這樣：

下面是加角度：

把第一個參數：top 換成一個角度，但是角度應該是多少呢？

試試吧

0deg 是藍上 紅下，180deg紅上 藍下，好像跟你想的有點不一樣，那沒關系，算一下就行了，

如設計圖上顯示，65°的角（我自己量的）。那我的角度應該寫成：180-（90-65） = 155°

background: linear-gradient(155deg, red ,red 50%,blue 50%,blue);

效果是：

?

當然你可以繼續往后追加顏色：

background: linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);

?

小結：兼容的寫法是：

background:?-webkit-linear-gradient(155deg,?red?,red?50%,blue?50%,blue?80%?,?green?80%,green);??

background:?-moz-linear-gradient(155deg,?red?,red?50%,blue?50%,blue?80%?,?green?80%,green);??

background:?-o-linear-gradient(155deg,?red?,red?50%,blue?50%,blue?80%?,?green?80%,green);??

background:?linear-gradient(155deg,?red?,red?50%,blue?50%,blue?80%?,?green?80%,green);??

轉載于:https://my.oschina.net/shuaihong/blog/1486520

總結

以上是生活随笔為你收集整理的linear-gradient 百分比以及斜角的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。