CSS3 背景グラデーション gradient_html/css_WEB-ITnose

CSS3 グラデーションは、linear-gradient（線形グラデーション）とradial-gradient（放射状グラデーション）に分けられます。グラデーションは CSS3 の属性ではなく、属性の値であることに注意してください。CSS3 ではグラデーションが背景用であるとは明確に述べられていませんが、これまでにわかっていることは、背景のみがグラデーション属性 (background-image) を適用するということです。も可能です）。

まず、2 つの例を通して、これら 2 つのグラデーションの基本的な使用法を直接説明しましょう: 最もよく使われる UI フロントエンド フレームワークを共有します。

線形グラデーション Linear-gradient:

. コード

背景:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
背景:-webkit -gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Webkit の古いグラデーション*/
background:-webkit-linear-gradient(left,#ace) ,#f96);/*Webkit の新しいグラデーション*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/

2 行目 - webkit-gradient は、古いバージョンの webkit カーネル ブラウザを作成する方法です。

効果は次のとおりです:

放射状グラデーションradial-gradient: 最もよく使用される UI フロントエンド フレームワークを共有します。

.Code

背景: -moz-radial-gradient(#ace, #f96, #1E90FF);

1. 背景: -webkit-radial-gradient(#ace, #f96, #1E90FF) ;

効果:

IE ブラウザの

gradient

のサポートは、他の最新ブラウザとは大きく異なります。これについては << で説明します。 CSS3 放射状グラデーション -gradient)> ;> と についてはそれぞれ 2 つの記事で説明します。