線性漸變

時間 2020-09-26

原文原文鏈接

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>html

.box1{
width: 300px;
height: 300px;
margin: 100px auto;瀏覽器

/*background-color: yellow;*/htm

/*
漸變背景不是背景顏色，而是圖片
因此咱們須要經過background-image
或 background 來設置漸變的效果圖片

linear-gradient() 線性漸變
radial-gradient() 徑向漸變
*/it

background-image: linear-gradient(red, yellow);
background-image: linear-gradient(green, blue);
/*線性漸變默認是自上向下進行變化*/
background-image: linear-gradient(red, orange, yellow, greenyellow);
/*
能夠關鍵字來指定漸變的方向：
to top 向上漸變
to right 向右漸變
to bottom 向下漸變
to left 向左漸變
*/
background-image: linear-gradient(to left top, red, orange, yellow, greenyellow);
background-image: linear-gradient(90deg, red, orange, yellow, greenyellow);
background-image: linear-gradient(red, orange, yellow, greenyellow);
/*
默認狀況下，漸變的顏色在元素中是平均分佈
*/
/*
能夠在顏色後，指定顏色的範圍開始位置，結束位置，這種語法不支持老版本的瀏覽器
*/
/*background-image: linear-gradient(red 0px 150px, yellow 150px 300px);*/io

/*
顏色後邊能夠指定一個長度，用來指定顏色的起始位置
*/
background-image: linear-gradient(red 100px, yellow 300px);
background-image: linear-gradient(red 20%, orange 40%, yellow 60%, greenyellow 80%);class

background-image: repeating-linear-gradient(red 50px, yellow 100px , orange 200px);meta

background-image: linear-gradient(red 100px, yellow 300px);語法

/*background-position: 200px 100px;*/im

background: linear-gradient(greenyellow, skyblue);

}

</style>
</head>
<body>

</body></html>