css3 境界線 note_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css3 border

css1ではborder属性が定義されており、要素の枠線のスタイル、枠線の色、枠線の太さを設定することができます。

border-width: 要素の境界線の太さを設定します。
border-color: 要素の境界線の色を設定します。
border-style: 要素の境界線の種類を設定します。

実際のアプリケーションでは、上記の 3 つの属性を組み合わせることができ、次のように省略できます:
border:border-width border-color border-style;

異なる辺に異なるスタイルを設定することもでき、ルールは上部に従います。、および左下のシーケンス。

border-widthとborder-colorはデフォルトのスタイルがあるので省略できますが、border-styleを書かないと表示されないのがよく使われる実線「実線」、点線「破線」です。「点線」など。

border-color

CSS3ではborder-colorプロパティが強化され、要素の境界線により多くの色を設定できるようになりました。

border-color:[<color> | transparent{1,4} | inherit

ログイン後にコピー

border-color の構文は css1 の構文とまったく同じです。border-color の省略された構文を使用しても効果はありません。border-color の標準的な記述方法を 4 つの境界線に分割する必要があります。複数の色を使用します。

border-top-colors:[<color> | transparent{1,4} | inheritborder-left-colors:[<color> | transparent{1,4} | inheritborder-bottom-colors:[<color> | transparent{1,4} | inheritborder-left-colors:[<color> | transparent{1,4} | inherit

ログイン後にコピー

注: color は負の数の色です。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>       div{        width:100px;        height:100px;        border:10px solid;        -moz-border-top-colors:red yellow blue green red yellow blue green red yellow;        -moz-border-right-colors:red yellow blue green red yellow blue green red yellow;        -moz-border-bottom-colors:red yellow blue green red yellow blue green red yellow;        -moz-border-left-colors:red yellow blue green red yellow blue green red yellow;                }     </style></head><body><div></div></body></html>

ログイン後にコピー

border-color 属性のパラメータは実際には非常に単純で、色の値です。 border-color で 1 つの色の値のみを設定する場合、その効果は css1 の border-color と同じです。 n 色の値が設定されており、境界線の幅が n ピクセルである限り、幅の値が n ピクセルより大きい場合、CSS3 の border-color プロパティを使用して各色を 1 ピクセルの幅で表示できます。色数の値、最後の色残りの幅を示すために色が使用されます。

border-image

CSS3 は、background-image 属性の機能をシミュレートできるピクチャーボーダー (border-image) 属性を追加します。

border-image:none | <image> [<number> | <percentage>]{1,4} [/ <border-width>{1,4}]? [stretch | repeat | round]{0,2}

ログイン後にコピー

わかりやすくするために、上記の属性を 4 つのサブ属性に分解します (実際には、規格に従ってプレイする必要があります)。
背景画像の紹介：border-image-soure
背景画像の切り抜き紹介：border-image-slice
ボーダー背景画像の幅：border-image-width
ボーダー背景画像の配置：border-image- repeat

border-image-source

border-image-source:url(image url)

ログイン後にコピー

border-image-source は、background-image 属性と同様に、url() を通じて背景画像を呼び出します。画像のパスは相対アドレスまたは絶対アドレスにすることができます。デフォルト値は none です。

border-image-slice

border-image-slice:[<number> | <percentage>]{1,4} && fill ?

ログイン後にコピー

border-image-slice は、導入した背景画像を分解するために使用されます。
値はピクセルとパーセンテージをサポートします。デフォルトの単位はピクセルであり、パーセンテージは境界線の背景画像に相対的なものであるため、ピクセルには単位を追加する必要はありません。たとえば、境界線画像のサイズは 300px X 240px です。、パーセンテージは 25%、15%、20% です。実際の対応する効果は、画像の 4 つの辺で (外側から内側に) 60px、90px、36px、60px のサイズをカットすることです (以下に従ってください)。上、右、下、左の順）。 Fill は文字通り塗りつぶしを意味します。このキーワードを使用すると、画像の境界線の中央部分が保持されます。デフォルトは空です。

border-image-width

border-image-width:[<length> | <percentage> | <number> | auto]{1,4}

ログイン後にコピー

ボーダーの背景画像の表示サイズを設定するために使用され、border-width として理解されます。

border-image-repeat

border-image-repeat:[stretch | repeat | round]{1,2}

ログイン後にコピー

ボーダー背景画像の配置、ストレッチ、リピート、ラウンドタイルを指定するのに使用され、デフォルト値はストレッチです。最大 2 つのパラメータ値のみを受け入れます。最初の値は水平方向の配置を表し、2 番目の値は垂直方向の配置を表します。値を取る場合は、水平方向と垂直方向が同じように配置されていることを意味します。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>       div{        width:200px;        height:200px;    /*剪切了图片四个方向各27px，并设置边框大小为27px，水平方向平铺，垂直方向拉伸*/            -moz-border-image:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2d_gVdFXXXXcLXXXXXXXXXXXX_!!2406102577.png) 27 27 27 27/27px round stretch;               }     </style></head><body>	<div></div></body></html>

ログイン後にコピー

border-radius

CSS3は、特に要素の角丸効果のために角丸属性border-radiusを追加します。

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

ログイン後にコピー

border-radiusは略語です。バックスラッシュ記号「/」が設定されている場合、バックスラッシュの前の値が要素の角丸の水平方向の半径となり、省略した場合は、次の値が垂直方向の半径となります。
none: 要素に丸い角がないことを示すデフォルト値。
: 浮動小数点数とユニット識別子で構成される長さの値。負の値は指定できません。
注: 角を丸めずに要素をリセットしたい場合は、値を none に設定しても効果はありません。値を 0 に設定する必要があります。
border-radius は各コーナーを個別に分離できます。

rree

円

rree

半円

rree

扇形

/*定义元素左上角圆角*/	border-top-left-radius:<length>/<length>  	/*定义元素右上角圆角*/	border-top-right-radius:<length>/<length> /*定义元素右下角圆角*/	border-bottom-right-radius:<length>/<length> /*定义元素左下角圆角*/	border-bottom-left-radius:<length>/<length>

ログイン後にコピー

楕円形

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>       div{        width:100px;        height:100px;            background:#808080;		/*半径是宽度的一半*/        border-radius:50%;                  }     </style></head><body><div></div></body></html>

ログイン後にコピー

box -shadow

box-shadow も css3 の重要な新しい属性です。要素ボックスのシャドウを定義します。

div{	width:100px;	height:50px;    	background:#808080;	/*定义左上角与右上角的半径为宽度的一半*/	border-radius:50px 50px 0 0;              }

ログイン後にコピー

次のように省略できます:

box-shadow:none | [inset x-offset y-offset blur-radius spread-radius color],[inset x-offset y-offset blur-radius spread-radius color]

ログイン後にコピー

　　box-shadow属性可以使用一个或多个投影，中间用逗号“，”隔开。
　　none:默认值，元素没有任何阴影效果。
　　inset:阴影类型，可选值。如果不设置，默认的投影方式是外阴影，如果设置为inset，就是投影为内阴影。
　　x-offset:阴影水平偏移量，其值可以是正负值。如果取正值，则阴影在元素的右边；如果取负值，则阴影在元素的左边。
　　y-offset:阴影垂直偏移量，其值可以是正负值。如果取正值，则阴影在元素的下边；如果取负值，则阴影在元素的上边。
　　blur-radius:阴影模糊半径，可选参数。只能为正值，如果取值为0，表示阴影不具有模糊效果，值越大，阴影的边缘越模糊。
　　spread-radius:阴影扩展半径，可选参数。其值可以是正负值，如果取值为正值，则整个阴影都扩大，负值缩小。
　　color:阴影颜色，可选参数，如果不设定任何颜色，浏览器会取默认色。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>       div{        width:100px;        height:50px;            border:1px solid #808080;        border-radius:10px;        /*水平与垂直偏移量为正值，阴影在元素右边与下边，黑色*/        box-shadow:2px 2px 0 0 black;                  }     </style></head><body>	<div></div></body></html>

ログイン後にコピー

　　阴影太浓，我们添加阴影模糊半径。

div{	width:100px;	height:50px;    	border:1px solid #808080;	border-radius:10px;	box-shadow:2px 2px 5px 0 black;              }

ログイン後にコピー

　　阴影模糊半径不只模糊了阴影边缘，整个元素都笼罩在阴影模糊半径之下，我们再添加阴影扩展半径，设置负值，使模糊半径缩小。

div{
width:100px;
height:50px;
border:1px solid #808080;
border-radius:10px;
box-shadow:2px 2px 5px -3px black;
}

　　只设置模糊半径与颜色。

div{	width:100px;	height:50px;    	border:1px solid #808080;	border-radius:10px;	box-shadow:0 0 10px 0 red;              }

ログイン後にコピー

　　只设置扩展半径与颜色。

div{	width:100px;	height:50px;    	border:1px solid #808080;	border-radius:10px;	box-shadow:0 0 0 3px red;              }

ログイン後にコピー

　　扩展半径类似边框效果，但不同的是，阴影并不在文档流中，所以不会改变布局。阴影可以设置多个，因此我们可以借助阴影扩展半径制作类似多边框颜色的效果。

div{	width:100px;	height:50px;   	border:1px solid #808080;	border-radius:10px;	box-shadow:0 0 0 3px red,		   0 0 0 6px yellow,        	           0 0 0 9px blue,  		   0 0 0 12px green;              }

ログイン後にコピー

　　内阴影效果

div{	width:100px;	height:50px;   	border:1px solid #808080;	border-radius:10px;	box-shadow:inset 2px 2px 2px 0 black;                      }

ログイン後にコピー

　　内阴影的阴影方向与外阴影的阴影方向相反，内阴影水平偏移量取正值时在左边，负值时在右边，垂直偏移量取正值时在上边，负值时在下边。

　　多层阴影效果

div{	width:100px;	height:50px;   	border:1px solid #808080;	border-radius:10px;	box-shadow:2px 2px 2px red,		   4px 4px 2px yellow,		   6px 6px 2px blue,        		   8px 8px 2px green;                      }

ログイン後にコピー

　　css3边框完，然个中奥妙，却不止