カテゴリー
box-shadow CSS3

【CSS3】box-shadow：ボックスに影を指定する

（例）【CSS3】box-shadowの使用方法

See the Pen
box-shadow by linlin (@linlin098765)
on CodePen. 

<p class="sample1">box-shadow: 10px 10px; </p> 
<p class="sample2">box-shadow: 10px 10px 10px rgba(0,0,0,0.4);</p>
<p class="sample3">box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);</p>
<p class="sample4">box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;</p>	
p.sample1 {box-shadow: 10px 10px;} 
p.sample2 {box-shadow: 10px 10px 10px rgba(0,0,0,0.4);}	
p.sample3 {box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);}	
p.sample4 {box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;}
p.sample1, p.sample2, p.sample3, p.sample4 {
width:300px; height:50px;	
background-color:gray;
border:dotted 5px red;
}

【CSS3】box-shadow：ボックスに影を指定する

　CSS3のbox-shadowは、ボックスに影を指定するプロパティです。
　box-shadowは「水平方向の距離 垂直方向の距離 ぼかしの距離 影の色 inset」のように半角スペースを空けてそれぞれ指定します。

カテゴリー
border-image border-image-repeat CSS3

【CSS3】border-image-repeat：画像ボーダーのリピートを指定する

（例）【CSS3】border-image-repeatの使用方法

See the Pen
border-image-source by linlin (@linlin098765)
on CodePen. 

<p class="sample1"></p>
<p>
<br>ボーダーに使用した画像<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" alt="ボーダー用画像">
</p>
p.sample1 {
width:200px; height:50px;
border-image-source:url("https://www.llc-linlin.com/picture/SEO.jpg");
border-image-slice:15px;
border-image-width:10;
border-image-outset:5px;
border-image-repeat:round stretch;
border-style:solid; border-width:3px;
}

【CSS3】border-image-repeat：画像ボーダーのリピートを指定する

　CSS3のborder-image-repeatは、画像ボーダーのリピートを指定するプロパティです。

  • stretch
    画像を伸縮させ、領域を埋める
  • repeat
    画像をタイル状に繰り返して表示
  • round
    画像をタイル状に均一に並ぶよう繰り返して表示
  • space
    画像をタイル状に並べ、スペースが空れば均等に分配して表示
カテゴリー
border-image border-image-outset CSS3

【CSS3】border-image-outset：画像ボーダーの領域を指定する

（例）【CSS3】border-image-outsetの使用方法

See the Pen
border-image-source by linlin (@linlin098765)
on CodePen. 

<p class="sample1"></p>
<p>
<br>ボーダーに使用した画像<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" alt="ボーダー用画像">
</p>
p.sample1 {
width:200px; height:50px;
border-image-source:url("https://www.llc-linlin.com/picture/SEO.jpg");
border-image-slice:15px;
border-image-width:10;
border-image-outset:5px;
border-image-repeat:round stretch;
border-style:solid; border-width:3px;
}

【CSS3】border-image-outset：画像ボーダーの領域を指定する

　CSS3のborder-image-outsetは、画像ボーダーの領域を指定するプロパティです。
　border-image-outsetの指定は上・右・下・左の順に４つ指定することが可能であり、省略することもできます。

  • 4番目の値を省略・・・2番目の値と同じ
  • 3番目の値を省略・・・1番目の値と同じ
  • 2番目の値を省略・・・1番目の値と同じ

カテゴリー
border-image border-image-width CSS3

【CSS3】border-image-width：画像ボーダーの太さを指定する

（例）【CSS3】border-image-widthの使用方法

See the Pen
border-image-source by linlin (@linlin098765)
on CodePen. 

<p class="sample1"></p>
<p>
<br>ボーダーに使用した画像<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" alt="ボーダー用画像">
</p>
p.sample1 {
width:200px; height:50px;
border-image-source:url("https://www.llc-linlin.com/picture/SEO.jpg");
border-image-slice:15px;
border-image-width:10;
border-image-outset:5px;
border-image-repeat:round stretch;
border-style:solid; border-width:3px;
}

【CSS3】border-image-width：画像ボーダーの太さを指定する

　CSS3のborder-image-widthは、画像ボーダーの太さを指定するプロパティです。
　border-image-widthの指定は上・右・下・左の順に４つ指定することが可能であり、省略することもできます。

  • 4番目の値を省略・・・2番目の値と同じ
  • 3番目の値を省略・・・1番目の値と同じ
  • 2番目の値を省略・・・1番目の値と同じ
カテゴリー
border-image border-image-slice CSS3

【CSS3】border-image-slice：画像ボーダーの使用範囲を指定する

（例）【CSS3】border-image-sliceの使用方法

See the Pen
border-image-source by linlin (@linlin098765)
on CodePen. 

<p class="sample1"></p>
<p>
<br>ボーダーに使用した画像<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" alt="ボーダー用画像">
</p>
p.sample1 {
width:200px; height:50px;
border-image-source:url("https://www.llc-linlin.com/picture/SEO.jpg");
border-image-slice:15px;
border-image-width:10;
border-image-outset:5px;
border-image-repeat:round stretch;
border-style:solid; border-width:3px;
}

【CSS3】border-image-slice：画像ボーダーの使用範囲を指定する

　CSS3のborder-image-sliceは、画像ボーダーの使用範囲を指定するプロパティです。
　border-image-sliceの指定は上・右・下・左の順に４つ指定することが可能であり、省略することもできます。

  • 4番目の値を省略・・・2番目の値と同じ
  • 3番目の値を省略・・・1番目の値と同じ
  • 2番目の値を省略・・・1番目の値と同じ
カテゴリー
border-image border-image-source CSS3

【CSS3】border-image-source：画像ボーダーの画像を指定する

（例）【CSS3】border-image-sourceの使用方法

See the Pen
border-image-source by linlin (@linlin098765)
on CodePen. 

<p class="sample1"></p>
<p>
<br>ボーダーに使用した画像<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" alt="ボーダー用画像">
</p>
p.sample1 {
width:200px; height:50px;
border-image-source:url("https://www.llc-linlin.com/picture/SEO.jpg");
border-image-slice:15px;
border-image-width:10;
border-image-outset:5px;
border-image-repeat:round stretch;
border-style:solid; border-width:3px;
}

【CSS3】border-image-source：画像ボーダーの画像を指定する

　CSS3のborder-image-sourceは、画像ボーダーに指定する画像を指定するプロパティです。
　画像ボーダーは４つの画像ではなく、１つの画像で上下左右のボーダーを作成します。１つの画像ファイルが９つに分割され、その分割された画像がボーダーを構成します。

カテゴリー
border-image CSS3

【CSS3】border-image：画像ボーダーを指定する

（例）【CSS3】border-imageの使用方法

See the Pen
border-image by linlin (@linlin098765)
on CodePen. 

<p class="sample1">１</p>
<p class="sample2">２</p>
<p class="sample3">３</p>
<p class="sample4">４</p>
<div>
ボーダーに使用した画像<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" alt="ボーダー用画像">
</div>
p{
  width:280px; height:50px;
  border-style:solid; border-width:10px; 
}
p.sample1 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 15 round;
}
p.sample2 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 15 round stretch;
}
p.sample3 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 15;
}
p.sample4 {
border-image: url("https://www.llc-linlin.com/picture/SEO.jpg") 30;
}

【CSS3】border-image：画像ボーダーを指定する

　CSS3のborder-imageは画像ボーダーを指定するプロパティです。
　border-imageは、画像ボーダーに関する表示方法をまとめて指定することが可能であり、border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeatの値を半角スペースでそれぞれ区切り指定します。

  • border-image-source
    ボーダーで使用する画像を指定
  • border-image-slice
    内側へスライスする距離を指定（９つのイメージパーツに分割される）
  • border-image-width
    画像ボーダーの太さを指定（border-widthでも可）
  • border-image-outset
    画像の開始位置を指定
  • border-image-repeat
    stretch・round・repeat・spaceのキーワードで画像の繰り返し方法を指定
カテゴリー
border-bottom-left-radius border-radius CSS3

【CSS3】border-bottom-left-radius：左下の角丸のサイズを指定する

（例）【CSS3】border-bottom-left-radiusの使用方法

See the Pen
border-radius by linlin (@linlin098765)
on CodePen.

<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
<div class="sample4"></div>
<div class="sample5"></div>
div{
  width:200px;
  height:50px;
  background-color:red;
  margin-bottom:10px;
}
.sample1{
  border-radius:10px 10px 10px 10px / 5px 5px 5px 5px;
}
.sample2{
  border-top-left-radius:20px;
}
.sample3{
  border-top-right-radius:20px;
}
.sample4{
  border-bottom-left-radius:20px;
}
.sample5{
  border-bottom-right-radius:20px;
}

【CSS3】border-bottom-left-radius：左下の角丸のサイズを指定する

　CSS3のborder-bottom-left-radiusは、ボックスの左下の角丸サイズを指定するプロパティです。
　数値を１つ指定した場合は角丸の水平・垂直方向は同じサイズになりますが、２つ指定した場合は１つ目が水平方向、２つ目が垂直方向になります。

border-bottom-left-radiusの指定できる数値

  • 数値
    px, em,exなど
  • %
    パーセント指定
カテゴリー
border-bottom-right-radius border-radius CSS3

【CSS3】border-bottom-right-radius：右下の角丸のサイズを指定する

（例）【CSS3】border-bottom-right-radiusの使用方法

See the Pen
border-radius by linlin (@linlin098765)
on CodePen.

<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
<div class="sample4"></div>
<div class="sample5"></div>
div{
  width:200px;
  height:50px;
  background-color:red;
  margin-bottom:10px;
}
.sample1{
  border-radius:10px 10px 10px 10px / 5px 5px 5px 5px;
}
.sample2{
  border-top-left-radius:20px;
}
.sample3{
  border-top-right-radius:20px;
}
.sample4{
  border-bottom-left-radius:20px;
}
.sample5{
  border-bottom-right-radius:20px;
}

【CSS3】border-bottom-right-radius：右下の角丸のサイズを指定する

　CSS3のborder-bottom-right-radiusは、ボックスの右下の角丸サイズを指定するプロパティです。
　数値を１つ指定した場合は角丸の水平・垂直方向は同じサイズになりますが、２つ指定した場合は１つ目が水平方向、２つ目が垂直方向になります。

border-bottom-right-radiusの指定できる数値

  • 数値
    px, em,exなど
  • %
    パーセント指定
カテゴリー
border-radius border-top-right-radius CSS3

【CSS3】border-top-right-radius：右上の角丸のサイズを指定する

（例）【CSS3】border-top-right-radiusの使用方法

See the Pen
border-radius by linlin (@linlin098765)
on CodePen.

<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
<div class="sample4"></div>
<div class="sample5"></div>
div{
  width:200px;
  height:50px;
  background-color:red;
  margin-bottom:10px;
}
.sample1{
  border-radius:10px 10px 10px 10px / 5px 5px 5px 5px;
}
.sample2{
  border-top-left-radius:20px;
}
.sample3{
  border-top-right-radius:20px;
}
.sample4{
  border-bottom-left-radius:20px;
}
.sample5{
  border-bottom-right-radius:20px;
}

【CSS3】border-top-right-radius：右上の角丸のサイズを指定する

　CSS3のborder-top-right-radiusは、ボックスの右上の角丸サイズを指定するプロパティです。
　数値を１つ指定した場合は角丸の水平・垂直方向は同じサイズになりますが、２つ指定した場合は１つ目が水平方向、２つ目が垂直方向になります。

border-top-right-radiusの指定できる数値

  • 数値
    px, em,exなど
  • %
    パーセント指定