CSS3: Cách tạo đường thẳng nhiều màu
Dưới đây là đoạn mã demo cách tạo một số đường thẳng với hiệu linear-gradient.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo cách tạo đường thẳng nhiều màu</title>
<style>
section{
width:100%;
height:20px;
border:none;
}
#to-bottom{
background:linear-gradient(to bottom, white, green);
}
#to-top{
background:linear-gradient(to top, white, green);
}
#to-right{
background:linear-gradient(to right, white, green);
}
#to-left{
background:linear-gradient(to left, white, green);
}
#to-bottom-right{
background:linear-gradient(to bottom right, white, green);
}
#to-bottom-left{
background:linear-gradient(to bottom left, white, green);
}
#to-top-right{
background:linear-gradient(to top right, white, green);
}
#to-top-left{
background:linear-gradient(to top left, white, green);
}
</style>
</head>
<body>
<section id="to-bottom"></section>
<p> </p>
<section id="to-top"></section>
<p> </p>
<section id="to-right"></section>
<p> </p>
<section id="to-left"></section>
<p> </p>
<section id="to-bottom-right"></section>
<p> </p>
<section id="to-bottom-left"></section>
<p> </p>
<section id="to-top-right"></section>
<p> </p>
<section id="to-top-left"></section>
</body>
</html>