CSS 3—UIスタイルの追加

休みに家に帰る最初のブログ.更新を続けますよ.
テキストの新規スタイル
1.opacity
opacityプロパティはcssの新しいプロパティで、主に要素の不透明度を設定するために使用されます.アトリビュート値は0～1、0は不透明度0、1は不透明度1で、値が大きいほど不透明になります.例を挙げると、黒の背景色を設定し、opacityを0.5、すなわち半透明の黒に設定します.

div{
       width: 400px;
	height: 400px;
	background-color: black;
	margin: 200px auto;
	opacity: 0.5;
}

このアトリビュートは1つの要素の要件しか満たしていません.バックグラウンドの不透明度を設定しながら文字の不透明度を必要とする場合、このアトリビュートは満たされません.rgbaを使用します.次はrgbaです.
2.rgba(背景がぼやけている文字がはっきりしていて、文字がぼやけている後ろ姿がはっきりしている)
rgbaはred、green、blue、alphaの略で、r赤、g緑、b青、不透明度の4つのパラメータがあります.rgbaとrgbの主な違いは、rgbaに不透明度を制御する4番目のパラメータがあることである.最初の3つのパラメータの値はいずれも0〜255であり、4番目の値は0〜1である.rgbaはrgbとopacityを統合した機能です.
例として

div{
	    width: 400px;
		height: 400px;
		background-color: rgba(255, 255, 0, 0.5);
		margin: 200px auto;
    }		
div p{
		font: 30px/400px "arial black" ;
		text-align: center;
		color: rgba(255, 0, 0, 0.8);
    }

rgbaという属性があれば、複数の要素に不透明度を同時に設定して、より複雑な設計を実現することができます.
3.テキストシャドウ(text-shadow)
text-shadowテキストにシャドウを追加します.テキストと複数のシャドウを追加できます.シャドウ値の間にカンマで区切られます.各シャドウ値は、X方向とY方向の要素のオフセット、ブラー半径(すなわち、ブラーの度合い)、およびカラー値から構成されます.
文字の影は、画面上で文字が平らに見えるのではなく、自分の動感があるように立体感を高めることができます.文字シャドウという属性を使って、レリーフ文字を作ることができます.レリーフとは文字をそんなに堅くしないで、立体感があるように見せることです.

p{
	font: 120px "arial black";
	text-align: center;
	margin: 200px;
	color: black;
	text-shadow: 5px 5px 5px deeppink,10px 10px 10px pink;
}

 
4.文字のレイアウト(文字は右から左に並べられます.2つの属性を組み合わせて使用します)
文字のレイアウトは主に古人の読書方式を実現し、右から左に読むもので、ホームページに現れるとどのように実現するのか.プロパティdirectionが実装されます.directionというプロパティを単独で使用するだけでは十分ではありません.unicode-bidi:bidi-overrideと組み合わせて使用する必要があります.
direction:ltr、rtl.左から右へ、右から左へ.

p{
	font: 120px "arial black";
	text-align: center;
	margin: 100px;
	color: black;
	direction: rtl;
	unicode-bidi: bidi-override;
}

5.文字オーバーフロー表示省略記号(4つの属性を組み合わせて使用)
white-space:nowarp
overflow:hidden
text-overflow:ellipsis
もう一つの隠れた条件は、箱が内容で開けられないことです.
この4つを満たさなければ、効果は出ません.4番目の隠し条件は無視されがちです.
ボックスモデルの新規スタイル
1.ボックスモデルシャドウ(box-shadow)
ボックスモデルのシャドウは文字シャドウと似ています.違いは、文字シャドウよりもいくつかの属性値が多く、最も重要なのはシャドウのサイズを制御できることです.
box-shadow:num 1 num 2 num 3 num 4シャドウカラーシャドウタイプ(内側シャドウ、外側シャドウ)、デフォルトのシャドウタイプは外側シャドウ、内側シャドウ(insert)を設定します.num 4の値はシャドウの大きさを制御し、通常のシャドウはボックスの大きさと同じで、値がボックスの大きさより小さい場合はシャドウが内側に縮み、ボックスの大きさより大きい場合は外側に広がります.

.box{
	width: 400px;
	height: 400px;
	background-color: pink;
	margin: 200px auto;
	box-shadow: 5px 5px 5px 5px brown;
}

2.box-sizing(border-box)widthとheightの値には、内側の余白と枠線が含まれます.
一般的にbox-sizingプロパティの役割は、主にボックスの幅の広いバッグに内側の余白と枠線が含まれていないことを制御することです.W 3 Cのボックスモデルの幅と高さとは、ボックスのコンテンツ領域の幅と高さが内側の余白と枠を含まないことを意味する.しかし、box-sizing:border-boxの場合、箱の幅の高さには内側の余白と枠が含まれます.
このプロパティを設定すると、レイアウト全体のレイアウトに影響を与えず、レイアウトに影響を及ぼさずに要素を調整する問題を解決します.
例えば、後者にログインしてアカウントを登録する場合、文字やパスワードを入力すると、文字や数字は常に入力ボックスから一定の距離を持っています.これはbox-sizingという属性を使用し、全体のレイアウトに影響を与えません.
 
今日はここまで书いて、次は水平垂直中央の合集を书きます!!!