JavaScript スタイルシートサンプル集

CSS3 の box-shadow はボックスに１つあるいは複数の影（ドロップシャドウ効果）を付加する
プロパティです。これを使うことによって、立体的な要素の表現が可能に可能になりました。
他の要素の配置に影響を与えないので重なることがあります。

box-shadowプロパティでボックスに影を表示

シャドウ　外側 右方向、下方向

box-shadow構文： 水平方向　垂直方向　ぼかし　広がり　色　向き（内向きにする場合insetを付加）；

.shadow {
box-shadow:6px 0px 0px 0px blue;
     } /* 水平方向 右へ 6px */

.shadow {
box-shadow:6px 7px 0px 0px blue;
     } /* 垂直方向 下へ 7px */

.shadow {
box-shadow:6px 7px 8px 0px blue; 
     } /* ぼかしを入れる 8px */

.shadow {
box-shadow:6px 7px 8px 5px blue; 
     }/* 広がりを入れる 5px */

外側 左方向、上方向

.shadow {
box-shadow:-6px -7px 0px 0px blue;
     } /* 値を'-’にすると左上に */

.shadow {
box-shadow:-6px -7px 8px 0px blue; 
     } /* ぼかしを入れる 8px */

シャドウ　内向き 左、上　// 影を内向きに付ける場合は値に（inset）を追加。

.shadow { box-shadow:
   6px 0px 0px 0px gray inset;
     } /* 水平方向 左内側へ 6px */

.shadow { box-shadow:
   6px 7px 0px 0px gray inset;
     } /* 垂直方向 上内側へ 7px */

.shadow { box-shadow:
  6px 7px 8px 0px gray inset; 
     } /* ぼかしを入れる 8px */

.shadow { box-shadow:
  6px 7px 8px 5px gray inset; 
     }/* 広がりを入れる 5px */

内向き 右、下

.shadow { box-shadow:
  -6px -7px 0px 0px gray inset;
     } /* 値を'-’にすると右下に */

.shadow { box-shadow:
  -6px -7px 8px 0px gray inset; 
     } /* ぼかしを入れる 8px */

シャドウ　外側、内側 両方に　// 複数の影を指定する場合にはコンマ（,）区切りで設定。

.shadow { box-shadow:
   6px 6px 8px 0px maroon,
   6px 6px 8px 0px maroon inset;
     } /* コンマ（,）区切り */

.shadow { box-shadow:
   6px -6px 8px 0px maroon,
   6px -6px 8px 0px maroon inset;
     } /* 外側,内側 */

.shadow { box-shadow:
   -6px 6px 8px 0px maroon,
   -6px 6px 8px 0px maroon inset;
     }

.shadow { box-shadow:
   -6px -6px 8px 0px maroon,
   -6px -6px 8px 0px maroon inset;
     }

ぼかし のみを指定　// 全方向、均等に ぼかしが架かります。

.shadow { box-shadow:
   0 0 15px 0 navy;
     } /* 外向きに四方向 */

.shadow { box-shadow:
   0 0 15px 0 navy inset;
     } /* 内向きに四方向 */

広がり のみを指定　// ぼかし がないので、色がそのまま鮮明に。擬似ボーダー

.shadow { box-shadow:
   0 0 0 8px olive;
     } /* 外向きに四方向 */

.shadow { box-shadow:
   0 0 0 8px olive inset;
     } /* 内向きに四方向 */

box-shadowで擬似ボーダー

.shadow-Box {
border:7px solid green;
box-shadow:0 0 0 7px red;
 }/*本来のボーダーの外にもう一重*/

.shadow-Box {
 box-shadow:
 0 0 0 10px purple,
 0 0 0 20px aqua,
 0 0 0 30px yellow,
 0 0 0 40px fuchsia;
  }/*擬似ボーダーを４本*/

box-shadowと border-radiusで二重丸、多重円

.shadow-Box {
   width : 80px;
   height : 80px;
   margin : 60px;
   padding : 20px;
   background : maroon;
   border:12px solid #fff;
   border-radius : 50%;
   box-shadow : 0 0 0 12px maroon;
	 }
       /* テキスト関係は省略 */

.shadow-Box {
   width : 50px; height : 50px;
   margin : 60px ; padding : 20px;
   border-radius : 50%;
   box-shadow : 
	0 0 0 5px #a757a8,
	0 0 0 10px #165e83,
	0 0 0 15px #0067C0,
	0 0 0 20px #008000,
	0 0 0 25px #ffd400,
	0 0 0 30px #f39800,
	0 0 0 35px #ed1a3d;
	 }

★☆★☆★☆　ナウでヤングなレンタルサーバー！ロリポップ！　☆★☆★☆★
月額１０５円〜容量最大１２０ＧＢ！大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』

CSS3 の border-radiusプロパティはボックスの角を丸める際に利用します。
各コーナーの値の設定に依って、 さまざまな形のボックスを表現できるようになりました。 (*´ω`*)
丸めは、指定された半径の円、あるいは楕円の円周、となります。

border-radiusプロパティを使って角丸ボックスを作る。

※下記　サンプルコード：　ボーダーは指定がない場合は border:2px solid #000;です。
　　必ず書き加えてください。背景色やテキストなどは別途設定してください。

４つのコーナーを同じ半径の角丸に、 値１つ

.radius-Box {
    border-radius: 15px; /* 半径を15px に */
			/* 値の単位には px,emなど 或は %を使用 */
     }

正円形　高さ、幅を同じにして　値を ５０パーセントに

.radius-Box {
    height: 100px;
    width: 100px;
    border-radius: 50%;

    /*  値がパーセントの場合は、要素の高さ・幅 に対する割合を
       半径とした角丸になります。*/
	 }

楕円形

.radius-Box {
    height: 200px;
    width: 100px; /* 幅が高さより大きいと 横向きに */
    border-radius: 50%;
	 }

★☆★☆★☆　ナウでヤングなレンタルサーバー！ロリポップ！　☆★☆★☆★
月額１０５円〜容量最大１２０ＧＢ！大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』

四隅の丸みをそれぞれ変えて 値４つ　「左上」 「右上」 「右下」 「左下」

  .radius-Box {
     border-radius: 50px 20px 5px 10px;
	}

四隅を角丸 値３つ　「左上」 「右上・左下」「右下」

.radius-Box {
    border-radius:5px 80px 5px;
     }

四隅を角丸 値２つ　「左上・右下」 「右上・左下」

.radius-Box {
    border-radius: 50px 20px;
     }

水平方向の半径 / 垂直方向の半径を指定して　四隅すべてに適用

.radius-Box {
    border-radius: 50px / 100px;
	}

水平方向 / 垂直方向　の半径をコーナー別に、まとめて指定

.radius-Box {
   border-radius: 50px 50px 20px 20px / 10px 10px 40px 40px;
	}

数値が並んでいますが、先頭から、水平方向の半径 → 「左上」 「右上」 「右下」 「左下」
' /  '（スラッシュ）を挿んで垂直方向の半径 → 「左上」 「右上」 「右下」 「左下」になります。

コーナーを示すプロパティで　四隅の半径をコーナー別に指定

.radius-Box {
    border-top-left-radius: 15px;     /* 左上 */
    border-top-right-radius: 50px;    /* 右上 */
    border-bottom-right-radius: 50px; /* 右下 */
    border-bottom-left-radius: 0px;   /* 左下 */
	}

水平方向␣垂直方向　の半径をコーナーごとに、個別指定

.radius-Box {
  border-top-left-radius: 5px 5px;/* 水平 垂直半径 */
  border-top-right-radius: 200px 100px;
  border-bottom-right-radius:0;/*値一つ,水平 垂直半径は同値*/
  border-bottom-left-radius: 20px 80px;
	}

 ← 垂直半径:100px
　　　 ↓水平半径:200px

ボーダーの幅と角丸の半径の関係

.radius-Box {
    border:20px solid chocolate;
    border-radius: 50px 15px;
     }

設定した角丸の半径は ”ボーダーの幅も含めた値” となるので ボーダーの幅が角丸の半径より
大きい場合は、ボーダーの外側の輪郭だけが丸くなります。内側は直角のままです。

上下のボーダーを太く　左右は、なし　

javascriptスタイルシートサンプル集

.radius-Box {
	width: 400px; padding: 8px 0; text-align: center;
	border-top: 15px solid #6464ff;
	border-bottom: 15px solid #6464ff;
	border-radius: 30px;
	  }

上,右のボーダーを太く　下,左は、なし　

.radius-Box{
    height: 100px; width: 200px;
    border-top: 10px solid red;
    border-right: 10px solid red;
    border-radius: 50%;
	}

　border や border-radius を組み合わせて 値をいろいろ変えると思わぬ形に出会います。
ご覧の方々も値をいじり倒してみてください。大発見があるかも........
下記に設定を、まとめました。

• ★月々100円（税抜）からオンラインショップを運営！
  独自SSL・高機能カート・クレジット決済が簡単導入
• コロリポプラン　詳細はこちら
• WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
• CSS positionプロパティ
• marginプロパティ
• border-styleプロパティ
• paddingプロパティ ボックスの内側の余白
• CSS疑似要素 :before / :after
• スタイルシートだけでポップアップメニュー、補足説明文を表示します。
• CSSで作る吹き出しボックス,サンプル
• リボンのような見出しをCSSで表示
• 三角形を CSS で作る
• スタイルシート css を使った横並びリストメニュー
• 文字の色,背景色の色の組み合わせのチェック
• Web Safeカラー 216色
• linear-gradient()関数 css3