CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS linear-gradient（）関数

linear-gradient（）は、線形グラデーションを背景画像として定義するために使用されます-

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

上で、開始点と方向を設定します。その色は、スムーズな遷移をレンダリングするために停止します。

例

ここで、linear-gradient（）-

を実装する例を見てみましょう。 
<!DOCTYPE html>
<html>
<head>
<style>
div {
   text-align: justify;
   text-justify: inter-word;
   color: white;
   background-image: linear-gradient(to bottom right, red , blue);
   position: absolute;
   right: 90px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>

出力

CSS linear-gradient（）関数

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet);
}
.demo {
   text-decoration: overline;
   text-decoration-color: yellow;
   font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力

CSS linear-gradient（）関数


  1. CSSの権利プロパティ

    rightプロパティは、要素の水平位置を設定するために使用されます。 −として設定されます right: auto|length|initial|inherit; 例 CSSで適切なプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;    color: white;    backgr

  2. CSSを使用したテキストのインデント

    テキストのインデントには、CSSのtext-indentプロパティを使用します。これは、段落の最初の行をインデントするためのものです。 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-indent: 30px; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is demo text.