CSS3漸變色
2020-05-18
一、背景色漸變
.box{width: 300px;height: 300px;
background: -webkit-linear-gradient(right, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(right, red , blue); /* 標準的語法（必須放在最后） */
}色值還可以可以用
background:linear-gradient(to left,rgba(232,0,0,0.3) 10%,rgba(0,51,204,0.6) 30%,rgba(0,51,204,1) 100%)
二、字體漸變色
.box{width: 300px;height: 300px;font-size: 100px;
background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0), rgb(255, 255, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}三、鏤空字體
input::-webkit-input-placeholder { color: red; }/* WebKit browsers */
input:-moz-placeholder { color: red; }/* Mozilla Firefox 4 to 18 */
input::-moz-placeholder { color: red; }/* Mozilla Firefox 19+ */
input:-ms-input-placeholder { color: red; }/* Internet Explorer 10+ */五、給圖片加上內(nèi)陰影
.demo{
-webkit-box-shadow:inset 0 0 30px #FF1493;
-moz-box-shadow:inset 0 0 30px #FF1493;
box-shadow:inset 0 0 30px #FF1493;
display:inline-block;
}
.demo img{
position:relative;
z-index:-1;
display: block;
}這里有一個漸變工具，比較好用：https://www.colorzilla.com/gradient-editor/