CSS3 の影、背景、角丸境界線のスタイルの簡単な紹介

CSS2.1 がリリースされてから 7 年が経過しました。 CSS3の登場は、CSS2.1の機能を強化し、画像の使用を減らし、HTMLページの特殊効果を解決することです

現在、モバイルWeb開発での使用に最も適したCSS3テクノロジーの機能は次のとおりです

●強化されたセレクター

●影

●強力な背景設定

●丸い境界線

影:

現在の CSS3 スタイルはすでに影スタイルの効果をサポートしています。現在利用可能な影効果には、テキスト コンテンツの影効果と要素の影効果の 2 種類があります。

box-shadow

CSS3 の box-shadow 属性は、要素に影の効果を与えるものです。

   box-shadow:<length> <length> <length> | color:

ここで、最初の長さは影の水平オフセット値です。垂直オフセット値、3 番目の値はシャドウブラー値です。水平および垂直オフセット値は、4px または -4px などの正の値と負の値を取ることができます

現在、box-shadow はほとんどの最新のブラウザーでサポートされています。ただし、Chrome や Safari などの Webkit ベースのブラウザでこの属性を使用する場合は、属性の名前を -webkit-box-shadow の形式で記述する必要があります。 Firefox ブラウザの場合は、-moz-box-shadow の形式で記述します。

次のコードは、Chrome、Safari、Firefox ブラウザーと互換性のある box-shadow を使用する簡単な例です:

<style type="text/css">
        p
        {
            /* 其他浏览器 */
            box-shadow: 3px 4px 2px #000;
            /* webkit内核浏览器 */
            -webkit-box-shadow: 3px 4px 2px #000; 
            /* Firefox浏览器 */
            -moz-box-shadow: 3px 4px 2px #000;
            padding:5px 4px;
        }
    </style>

text-shadow

text-shadow 属性は、影効果またはぼかし効果を設定するために使用されます。テキストコンテンツ。

現在、text-shadow 属性は、Safari、Firefox、Chrome、Opera ブラウザーでサポートされています。 IE8 より前のブラウザはこの機能をサポートしていません。また、ほとんどのモバイル Web ブラウザーは十分にサポートされています。

text-shadow の構文は基本的に box-shadow と同じです:

box-shadow: text-shadow の実践例 :

 <style type="text/css">
        p
        {
            text-shadow: 5px -10px 5px red;
            color:#666;
            font-size:16px;
        }
    </style>

Background

CSS3 仕様では、CSS3 は、background 属性に多くの新機能を追加します。背景の表示範囲と複数の画像背景の両方をサポートします。最も重要なことは、属性設定を通じて背景色のグラデーションや任意の色効果を設定できることです。これは非常に多用途です。

CSS3 は背景属性を強化します。以前は画像を使用してさまざまなページの変更を置き換えていましたが、徐々に背景属性に置き換えることができます。これらの機能により、特にモバイル デバイス プラットフォームでのページの読み込み速度が向上し、ページのパフォーマンスが向上します。

background-size

background-size 属性は、背景画像のサイズを設定するために使用されます。

この属性は現在、Chrome、Safair、Opera ブラウザーでサポートされており、Android および IOS プラットフォームの Web ブラウザーもサポートしています。

背景サイズ属性には、Web ブラウザーごとに特定の構文の違いがあります。 Webkite コアに基づく Chrome および Safari ブラウザーでは、書き込みメソッドは -webkit-background-size です。

モバイル開発プロジェクトでは、互換モードの書き込みメソッドを使用することをお勧めします。例は次のとおりです:

 <style type="text/css">
        p
        {
            background-size:10px 5px;
            -webkit-backgriud-size:10px 5px;
        }
    </style>

背景

背景属性 CSS3 で提供される非常に強力な機能。非常に重要な機能の 1 つは複数の背景です。以前は画像は 1 つしか使用できませんでしたが、CSS3 では複数の背景画像を設定できます。構文は次のとおりです。

  background:url(bg.jpg) left top no-repeat,
                             url(bg2.jpg) left top no-repeat;

Chrome ブラウザーと Safari ブラウザーの両方で、background 属性を使用して複数の背景画像をサポートします。これらは Webkit ベースのブラウザであるため、この機能は Android および IOS プラットフォームのモバイル ブラウザでもサポートされています。ただし、画像を使用して背景を設定すると、モバイル Web の全体的なエクスペリエンスとパフォーマンスに重大な影響を与えるため、Webkit の機能を使用して、画像を使用する代わりに背景に色のグラデーションを使用します。構文は次のとおりです:

      -webkit-gradient(<type>, <type> [,<radius> ]?,<point> [, <radius> ]? [, <stop> ]*)

type タイプは、線形グラデーション、線形、放射状グラデーション、放射状などのグラデーション タイプを指します。次のコード:

<style type="text/css">
        p
        {
            background: -webkit-gradient(linear,0 0,0 100%,form(#ff),to(#000));
        }
</style>

Rounded Border

角丸効果は CSS3 で簡単に実現できます。コード内で border-radius 属性を定義することで、角丸効果を自由に実現できます。

これまでのところ、この属性は Chrome、Safari、Opera、Firefox ブラウザーでサポートされています。ただし、ブラウザーごとに記述方法にいくつかの違いがあります。たとえば、Chrome ブラウザーと Safari ブラウザーは -webkit-border-radius を記述する必要があります。互換性のあるサンプル コードは次のとおりです。

<style type="text/css">
        p
        {
             border-radius:10px 5px;
             /* Firefox浏览器 */
             -moz-border-radius:10px 5px;
             /* webkit 内核浏览器 */
             -webkit-border-radius:10px 5px;
        }
    </style>

必須 border-radius 属性では負の値が許可されないことに注意してください。いずれか 1 つが 0 の場合、その値に対応する角は長方形になり、それ以外の場合は丸い角になります。

以上がCSS3 の影、背景、角丸境界線のスタイルの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。