css3の使い方を整理(1)_html/css_WEB-ITnose

まず、この記事では CSS3 のプロパティについてのみ説明します。これらのプロパティをサポートしていないブラウザーでこれらの効果を実現する方法については、この記事の範囲外です。

Gradient

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

语法：-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

---

示例：-moz-linear-gradient(top,#fff,#000);

この例が意味するのは、グラデーションが上から下に実装されることです。上から下へ 白から黒へのグラデーションを実現するには、top を左上と書くこともできます。これは、左上隅から開始してグラデーションを実現することを意味します

放射状グラデーション 放射状グラデーション

语法：-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

許容パラメータ: 開始位置、方向、色、放射状グラデーション、グラデーション形状 (円または楕円)、サイズ (最近接側、最近接角、最近接側、最近接角、最近接側、最近接-)コーナー、最遠側、最遠コーナー、包含またはカバー))

例:

-webkit-radial-gradient(bottom left,ellipse closest-side,#f90 5%,#f00 30%,#2e9900 80%)

この例から、開始位置は左下隅、グラデーション形状です。これは楕円であり、パーセンテージは放射状のグラデーションを表し、3 つの色の値は開始色の値を表し、最も近い側はグラデーションのサイズを表します

放射状のグラデーションは現在存在しませんOpera ブラウザをサポートします

Repeating-linear-gradient

Repeating-linear-gradient 私のテストによると、Firefox では表示できますが、Webkit では正常に表示できませんカーネル ブラウザ。Repeating-radial-gradient は Firefox で表示できます。Chrome では通常どおり表示されます。

サンプル コード:

-webkit-repeating-linear-gradient(top left -45deg,#ace,#ace 5px,#2e9900 5px,#2e9900 10px);

私のデモ: http://codepen.io/superSnail/pen/ jWwxpP

複数の背景

構文: 背景: url(...), url(...), url(...) たとえば~ 背景画像に 1.jpg があるとします。 , 2.jpg, 3.jpg, そうするとこうなります。 この背景画像のように

background:url("1.jpg") 0 0 no-repeat,                 url("2.jpg") 200px 0 no-repeat,                 url("3.jpg") 400px 201px no-repeat;

と書くこともできます。 Proficient in CSS では、画像を使用する 2 つの方法を紹介します。1 つは、角が丸い 2 つの長いストリップを上下として使用し、中央を並べて表示する方法です。 2つ目は、四隅をカットし、他の領域を埋めて丸いボックスを実現する方法です。

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");background-repeat: no-repeat, no-repeat, no-repeat;  background-position: 0 0, 200px 0, 400px 201px;

border-radiusは省略された方法です。

と書くと、

语法：border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

Oneパラメータ

は、四隅の水平ラジアンと垂直ラジアンが同じ値であることを意味します

• 2 つのパラメータ を記述すると、左上と右下が最初のパラメータであることを意味します、右上と左下が 2 番目のパラメータ
• 3 つのパラメータ と書くと、左上が最初のパラメータ、右上と左下が最初のパラメータであることを意味します。 2 番目のパラメータ、左下が 3 番目のパラメータ
• 4 つのパラメータ の場合、左上が最初のパラメータ、右上が 2 番目のパラメータ、右下が 3 番目のパラメータですパラメータ、左下が 4 番目のパラメータ
• この書き方 / 前は水平方向の 4 ラジアンを表します / 後ろは垂直方向を表します 4 ラジアン
また、border-radius は -moz-border-radius と -webkit-border-radius の後ろに配置する必要があることにも注意してください

示例：border-radius:10px 10px 5px 5px /5px 5px 10px 10px;

border-radius のデモ: http://codepen.io/superSnail/pen/QyMNZv

ピクチャーボーダー border-image

まず第一に、border-image は IE をサポートしていません。サポートされているブラウザは Firefox3.5 以降、chrome または Safari3 以降です。

はそれぞれ枠線の背景画像アドレス、画像のトリミング方法、画像の繰り返し方法を表します

语法：border-image:source slice repeat

カットメソッド

: 背景画像を 9 正方形のグリッドに 4 回切り取ります。これは、境界画像を理解するための最も重要なポイントです。

• 。

  Repeatメソッド

  :repeat(リピート)、stretch(ストレッチ)、round(タイル)の3種類があります。デフォルト値は、stretch
• 9 正方形のグリッドをカットするとき、値のデフォルトの単位は px です。px を直接書かないでください。そうしないとエラーが発生します。スライスには 1 ～ 4 つのパラメータを指定でき、方向の順序はマージン、パディングなどと一致し、上から右、下から左へ時計回りに行われるため、上の図は 30% 35% 40% 30% または 30 と書く必要があります。 % 35% 40% slice 背景画像を9等分に切り出した後、まず四隅の画像を四隅に配置したまま、四辺の中央部分から描画を開始します。デフォルトでは、設定した繰り返しパターンに従って境界線が引き伸ばされます。繰り返しまたはタイリングを使用する場合は、自分で設定する必要があります。

繰り返しとタイリングの違いについて説明します。

繰り返し

は、端に配置できない場合は直接切り取られるため、元のサイズに従って繰り返すことを意味します。半分の部分があります

タイリング

は、元のサイズに従って繰り返す必要がないことを意味します。半分の部分を使わずに必要な長さをカバーするには、繰り返し単位の幅を変更してタイリングを実現します。

(ただし、私のテスト結果では、タイル表示効果と繰り返し表示効果は同じでした。詳細についてはデモを参照してください) 上記を理解すると、border-image の実​​装を確認するのがはるかに簡単になります。例:http://codepen.io/superSnail/pen/adyJEp 詳細については、border-image を詳しく学習するための私のチュートリアルを参照してください。http://www .zhangxinxu.com/wordpress/2010/01/css3-border-image の詳細説明、アプリケーションと jquery プラグイン/ Projection box-shadow

参照: シャドウ タイプ、水平オフセット、垂直オフセット、ぼかし半径、拡大半径、色

• 其中阴影类型为inset时，为内阴影，默认为外阴影
• color不设值的时候，会取浏览器的默认阴影颜色，但是各浏览器的默认值不一样，在webkit内核的浏览器下阴影表现为透明色而mozilla和oprea下表现为黑色，建议不要省略
• 在写多层次阴影的时候，先写的层级会比较高
• 对图片写内阴影是不会有任何效果的

dropShadow效果demo：http://codepen.io/superSnail/pen/XXajKm

文字阴影 text-shadow

语法：text-shadow:offset,offset,blur,color

text-shadow可以根据模糊半径的不同一层一层叠加实现各种文字效果

例如：

text-shadow:40px #ff00de, 0 0 70px #ff00de;

这样样式的叠加，模糊半径都是从中心点开始算的，具体见demo

文字阴影的demohttp://codepen.io/superSnail/pen/QyMjBV

透明度RGBA，opacity

首先RGBA表示红，绿，蓝和透明四个通道所以背景白色可以表示为background:rgba(255,255,255,1);就是红绿蓝三个通道值为255，透明度为1，也就是不透明。如果要半透明效果可以将透明通道的值设为小数。

其次，用opacity实现透明，白色背景不透明，应该写成background:#fff;opacity:1;

以上两种方法按照这样的规律类推。

opacity的缺点是，如果父元素设为半透明，那么它的子元素都会继承这个半透明。然而rgba的表示方法就不会有这个问题。比如要实现一个半透明的弹出层，用opacity的话，就将导致这个层里的文字都会以半透明显示。为了解决这样问题就不得不用两层，将文字以定位的方式显示。