図解 CSS3 読書メモ --border_html/css_WEB-ITnose

CSS border

属性: border-style、border-width、border-color

書き込み:
個別に記述: E {border-style: Solid;border-width: 1px;border-color : alicebule;}
結合書き込み: E {border: 1px Solid alicebule;}

注:

• border-style は必須属性です、他の順序は台無しになる可能性があります

• border が設定されている場合: none 、ブラウザは自動的に border-style: none として解析します

• 境界線のサイズ、つまり border-width のデフォルトは、中です

css3 new:
border-color, border-image, border-radius

CSS3: border-color

CSS2 では、border-color 属性を使用して、要素のボーダー全体または各ボーダーに色を付けることができますが、各ボーダーは 1 つの色しか使用できません。ほとんど。

CSS3 の改良された border-color 属性により、同じ境界線に複数の色を設定する方法が提供されます (たとえば、グラデーション カラー や カラー を境界線に追加する)。ただし、これまでのところ、Firefox 3.0+ ブラウザのみがこの属性をサポートしています。 CSS3 ボーダーカラー アプリケーションが非常に珍しいのもこのためです。

上で述べたように、css3border-color は FF でのみサポートされているため、使用またはテストするときに -moz- 接頭辞を追加する必要があります。

使用法:

.box{    border：5px solid transparent;    -moz-border-top-colors：<color1> <color2> <color3> <color4> <color5>;    -moz-border-right-colors：<color1> <color2> <color3> <color4> <color5>;    -moz-border-bottom-colors：<color1> <color2> <color3> <color4> <color5>;    -moz-border-left-colors：<color1> <color2> <color3> <color4> <color5>;}

各境界線に 5 つの色を設定し、それらはすべて 5 ピクセルの幅を占めます。このとき、各色のborder-widthは1pxになります。実際、境界線の幅を x ピクセルに設定し、各境界線に y 色を設定すると、x>y の場合、最初の y-1 色はそれぞれ 1 ピクセルを占め、最後の色は x- y+1 ピクセルを占めます。

例: 3 次元のグラデーション効果

.box {    width: 200px;    height: 100px;    border: 10px solid transparent;    border-radius: 15px 0 15px 0;    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;  }

Effect:

CSS3: border-radius

border-radius 多くのフロントエンダーには馴染みがあると思いますが、これは要素の角丸効果です。 。この属性は、ie9+ およびその他の主流の最新ブラウザと互換性があります。

基本的な書き方:

• 均一な半径で角丸を設定します: border-radius:

• 複数の半径で角丸を設定します: border-radius:

• 不均一な水平方向と垂直方向の半径を設定します: / ;

• 個別の設定:

  border-top-left-radius:
  border-top-right-radius:
  border-bottom- left-radius: :
  

  FF: -moz-border-radius-topleft

  Chrome: -webkit-border-top-left-radius

  Illustration CSS3 では、Webkit カーネル ブラウザーの画像には丸い角がないことが記載されていますテスト後 (現在のバージョンに基づいて) Chrome 44 以降の Webkit カーネルの新しいバージョンでは、この問題が修正されています。以下に示すように
  

  Chrome の下:

border-radius では、円、半円、四分円、楕円などの効果も作成できます:

• .box {

     height: 100px;        width: 100px;        border-radius:100px;/*或者50%*/        background: aliceblue;     margin: 20px; 

  ログイン後にコピー
  }
  半円:
• .box {

     height: 100px;   width: 50px;   border-radius: 50px 0 0 50px;/*分表表示左上角 右上角 右下角 左下角*/   background: aliceblue;

  ログイン後にコピー
  }
  四分円:
• .box {

     height: 100px;   width: 50px;   border-radius: 50px 0 0 0;/*分表表示左上角 右上角 右下角 左下角*/   background: aliceblue;

  ログイン後にコピー
  }
  楕円:
• .box {

     height: 100px;   width: 50px;   border-radius: 25px / 50px;/*分表表示水平半径 垂直半径。或者50% / 50%;*/   background: aliceblue;

  ログイン後にコピー
  }
  CSS3: border-image

注意 ie并不支持border-image

ログイン後にコピー

Writing:

border-image: url top right bottom left x-repeat y-repeat

• top,right,bottom,left: 単位を追加する必要はないことに注意してください。追加した場合は無効となります）。デフォルトは px ですが、パーセンテージを使用することもできます

• 図に示すように:

画像の切り取り方法:

ここに画像の切り取り方法を説明するための 2 つの例があります:
左に拡張して、右側の大きな画像に接続します。

現在の状況は、4 と 2 つの小さな写真を 2 枚使用することに相当します。 6 スプライシングと拡張:

就会发现实际效果中，会多出上下边框的宽度。其他没有变化。

图片铺排方式：

左图水平和垂直方向都是stretch，右图水平是stretch，垂直是round

图一水平和垂直均为round，图二水平和垂直均为stretch，图三均为repeat

参考文章：Click

CSS3：box-shadow

box-shadow用来定义元素的盒子阴影。
IE8及以前的浏览器不支持box-shadow

用法：

border-shadow: 阴影类型 水平位移 垂直位移 模糊半径 阴影扩展半径 颜色

• 阴影类型默认为： 外阴影，可设定唯一值：inset

• 水平位移：x-offset。可取正负值，正值阴影在元素右方。

• 垂直位移：y-offset。可取正负值，正值阴影在元素下方。

• 模糊半径：值只能为正，取值越大，阴影边缘越模糊。

• 阴影扩展半径：可取正负值。若无模糊半径，设置了扩展半径和为元素设置边框的效果一致。

多层阴影：
box-shadow可以多层阴影同时使用，每层阴影之间使用“，”隔开。设置在最前的阴影将显示在最顶层，所以一定要注意阴影的大小取值。
若阴影的设置为：0 0 0 20px lime, 0 0 0 10px yellow, 0 0 0 8px green
则这时第一层阴影的扩展半径为20，显示在最顶层；第二层阴影显示在第一层阴影之下，此时因为第一层阴影的扩展半径>第二层阴影的扩展半径，所以第一层阴影会把第二层阴影覆盖掉。