1. 角丸（Border Radius）

CSS3では、角丸効果を簡単に実現できます。以下のようなコードを使用します。

#box1 {
    border: 1px solid #699;
    border-radius: 20px;
}

角丸効果の例：

2. ボックスシャドウ（Box Shadow）

ボックスシャドウを使用すると、要素の影効果を実現できます。以下のようなコードを使用します。

#box1 {
    border: 1px solid #699;
    box-shadow: 5px -5px 5px #b6ebf7;
    width: 100px;
    height: 100px;
    margin-left: 100px;
    margin-top: 100px;
    background-color: Gray;
    border-color: Yellow;
}

box-shadowの4つのパラメータ：

• 水平オフセット：正数は右方向、負数は左方向
• 垂直オフセット：正数は下方向、負数は上方向
• 霧状効果の広がり
• 影の色

例：

3. 透明度（Transparency or RGBA）

CSS3では、RGBAを使用して透明度を簡単に設定できます。

#box3 {
    background-color: rgba(110, 142, 185, 0.5);
}

RGBAの4つのパラメータ：

• R: 赤の値
• G: 緑の値
• B: �青の値
• A: 透明度（0.0～1.0）

IEの互換性を確保するには、以下のような修正が必要です。

#box3 {
    background-color: #6e8eb9;
}

body:last-child #box3 {
    background-color: rgba(110, 142, 185, 0.5)!important;
}

transparent効果の例：

4. 列数（Columns）レイアウト

列数レイアウトを使用すると、要素内の内容を複数の列に分割できます。

#box1 {
    border: 1px solid #699;
    columns: 2;
    column-gap: 20px;
    column-rule: 1px solid #6e8eb9;
    margin-left: 100px;
    margin-top: 100px;
    border-color: Yellow;
    background-color: Gray;
}

columns属性の説明：

• columns: 列数を指定
• column-gap: 列間の間隔を指定
• column-rule: 列間の罫線のスタイルを指定

2列と3列の例：

5. 複数背景画像

複数の背景画像を同時に表示できます。

background-image: url(/Nature/bird1-thumb.png), url(/Nature/apple.jpg);

背景画像の例：

IEの互換性を確保するには、以下のような修正が必要です。

#box5 blockquote {
    background: url(/i/quotel.gif) 0 0 no-repeat;
    padding: 0 20px;
}

body:last-child #box5 blockquote {
    background: url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;
}

6. 輪郭（Outlines）

輪郭を使用すると、要素の内部に追加の境界線を描画できます。

#box1 {
    border: 1px solid #000;
    outline: 1px solid #699;
    outline-offset: -20px;
    padding: 0 20px;
    margin-left: 100px;
    margin-top: 100px;
    border-color: Yellow;
    background-color: Gray;
    width: 400px;
    height: 300px;
}

outline属性の説明：

• outline: 境界線のスタイルを指定
• outline-offset: 境界線のオフセット（距離）を指定

輪郭効果の例：

7. 背景グラデーション（Background Gradients）

背景グラデーションを使用すると、要素の背景に色のグラデーションを適用できます。

#box1 {
    background: -webkit-linear-gradient(bottom, #b6ebf7, #fff 50%);
}

グラデーションの例：

8. 回転（Rotate）

要素を回転させることができます。

#box1 {
    border: 1px solid #000;
    transform: rotate(20deg);
    border: 1px solid #699;
    padding: 0 20px;
    margin-left: 100px;
    margin-top: 100px;
    border-color: Yellow;
    background-color: Gray;
    width: 400px;
    height: 300px;
}

回転効果の例：

9. 反射（Reflect）

反射効果を使用すると、要素の下部に影を表示できます。

#myFont {
    box-reflect: below 10px linear-gradient(transparent, rgba(255, 255, 255, 0.51));
}

反射効果の例：

10. トランジション（Transitions）

トランジションを使用すると、CSSの値を滑らかに変化させることができます。

.ease {
    transition: all 4s ease;
}

.ease-in {
    transition: all 4s ease-in;
}

.ease-out {
    transition: all 4s ease-out;
}

.ease-in-out {
    transition: all 4s ease-in-out;
}

.linear {
    transition: all 4s linear;
}

トランジションの例：