CSS常用字體屬性：background-origin和background-clip介紹說明

(一)常用的字體屬性：

　　　　　　font-weight: 屬性值100-900  400等於正常700等於bold ，數值越，粗

　　　　　　font-size:字體大小，單位可以為px或者%

　　　　　　#font-family:

　　　　　　font-style:字體的樣式italic斜體normal正常

　　　　　　font-variant##:cap#a>#cap#s>#pcap#s>#pcap#a>#pcap#ccap#s##>#>#>#>#pcap#s>#pcap#d字母轉換為小一號的大小字母　　　　　　注意：所有屬性也可以透過font一個屬性寫,例如：

　　　　　　　　腳, 7%　　　　　　i　　ser

if

，寫的順序：font-style font-variant font-weight font-size line-height font-famiyl,多個樣式有空格分開，必須依照這個順序寫，font-size和line-height中間必須用/分開（二）字體的顏色：color:屬性值可以寫顏色英文,例如：red 

　　g　　　　　　　　或rg　　　　　　　　,0-255,0-255);

　　　　　　　　　　或rgba(0-255,0-255,0-255,0-1);0表示透明，1表示不透明

#　:0-1；也表示透明。和rgba（）的區別，此屬性會作用於後代標籤，而rgba()不會

（三）行距、對齊

　　　　　　　　　　line-height （行高） ：a.像素高）：a.像素單位，例如48px b.不帶px 正常行高的倍數c.百分數同b（調整

控制項

中文字垂直方向垂直居中的方式，控制項的height=控制項的line-height）

　　　　　　text-align

（對齊）:區塊級元素中文字的水平對齊方式

left center right##　　　　　　　　　　、 -spacing （字元間距）: 字與字之間的距離

　　　　　　

text-decoration （文字修飾）：底線underline 刪除

lineline-through上劃線overline none(可以去掉

超連結的下劃線)　　　　　　overflow#:控制超出範圍文字的顯示方式，auto根據文字多少自動顯示捲軸， scroll總是顯示捲軸，hidden超出範圍文字隱藏,也可以透過overflow-x

、

overflow-y設定水平和垂直方向　　　　　　text-overflow :設定多餘文字的顯示方式，clip

裁減掉，ellipsis省略號,（重點，讓每行多餘的文字顯示省略號，a.white-spacing:nowrap b.overflow:hiddern text- overflow:ellipsis）

　　　　　　text-shadow：（4個屬性值：水平陰影距離垂直陰影距離模糊距離陰影顏色）文字的陰影，前面2個屬性值不能省。水平陰影距離越大，陰影右移。垂直陰影距離越大，陰影下移。陰影模糊距離，數值越大，陰影越來越模糊，預設為0，不模糊。陰影顏色，可以選，預設為黑色

　　　　　　

text-indent：首行縮排，可以用像素值調整縮排大小

　　　　　　text-stroke：text-stroke　的粗細，描邊的顏色

　　　　　　white-space

:nowarp 設定中文行末不斷行顯示（中文預設自動換行，英文不會自動換行，根據空格會自動換行）

　　　　　　

word-break:瀏覽器預設在空格處斷行，當一個單字長度超出範圍時，會不斷行顯示，break-all允許在單字內換行

(五)背景樣式：

　　　　　　　　　　background （縮寫形式）

　　　　　　　　　　background-color（背景色）

　　　　　　　　　　background-image（背景圖）：url(圖片的地址)，背景圖和背景色同時存在，背景圖會覆蓋背景色

　　　　　　　　　　background-repeat（背景重複方式重複方式)： no-repeat(不平鋪) repeat-x(水平平鋪) repeat-y(垂直平鋪) repeat平鋪（預設）

　　　　　　　　　　　　　　　　　　　　#background-position##（位置座標、位置座標、偏移量2個屬性值：水平和垂直）:指定位置：left/center/right ，可以寫像素或百分比，只寫一個屬性值，預設寫的是水平方向，另外一個方向預設垂直居中（注意：使用像素時候，圖片的左上角往各個方向移動的實際距離， 當使用百分比的時候，建議不使用負數，代表去掉圖片後剩餘空白距離的分佈比例，例如：background-positon:30% 水平方向去掉圖片後，剩餘的區域3:7分）　　　　　　　　　　

top

/center/bottom# 當只寫一個屬性值的時候另外一個預設居中#　　　　　　　　　　

background-clip

:border-box （從邊框外緣開始顯示）padding-box（從邊框內緣開始顯示） content-box（從文字內容不在顯示區的背景圖或背景色會被裁切不顯示）　　　　　　　　　　

#background-origin

：定位的起點border-box(從邊框外緣開始) #background-origin：定位的起點border-box(從邊框外緣開始) #background-origin：定位的起點border-box(從邊框外緣開始) padding-box（從padding-box邊框內緣） content-box（從文字內容區開始）

　　　　　　　　　　#background-size：背景圖片大小一般2個屬性：寬度高度，當只有一個屬性值的時候，預設為寬度，高度等比縮放

　　　　　　　　　　寬高的寫法：a.直接寫像素b.寫百分比（父容器寬高的百分比）

以上是CSS常用字體屬性：background-origin和background-clip介紹說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！