2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

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

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

html:

<div></div>

css:

div{

width:300px;

height:200px;

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

}

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

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

?

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

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

?

biubiu~biu 變成這樣：

下面是加角度：

把第一個參數(shù)：top 換成一個角度，但是角度應(yīng)該是多少呢？

試試吧

0deg 是藍(lán)上 紅下，180deg紅上 藍(lán)下，好像跟你想的有點(diǎn)不一樣，那沒關(guān)系，算一下就行了，

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

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

效果是：

?

當(dāng)然你可以繼續(xù)往后追加顏色：

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

?

小結(jié)：兼容的寫法是：

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

轉(zhuǎn)載于:https://my.oschina.net/shuaihong/blog/1486520

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。