css3學習第一天

標籤：效果   overflow   載入   ges   -o   mil   12px   back   覆蓋   

CSS3文字與字型 text-overflow 與 word-wrap

文法:

text-overflow:clip;       /*剪下*/text-overflow:ellipsis;    /*省略標記*/

但是text-overflow只是用來解說文字溢出時用什麼方式顯示，要實現溢出時產生省略符號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略符號的效果，代碼如下：

text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 

 

CSS3文字與字型 嵌入字型@font-face

@font-face能夠載入伺服器端的字型檔，讓瀏覽器端可以顯示使用者電腦裡沒有安裝的字型。

文法:

@font-face {    font-family : 字型名稱;    src : 字型檔在伺服器上的相對或絕對路徑;}

這樣設定之後，就可以像使用普通字型一樣在（font-*）中設定字型樣式。

比如：

p {    font-size :12px;    font-family : "My Font";    /*必須項，設定@font-face中font-family同樣的值*/}

 

CSS3背景 background-origin

文法:

ackground-origin ： border-box | padding-box | content-box;

參數分別表示背景圖片是從邊框，還是內邊距（預設值），或者是內容地區開始顯示。

需要注意的是，如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示

 

CSS3背景 background-size

 設定背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。

文法：

background-size: auto | <長度值> | <百分比> | cover | contain

取值說明：

1、auto：預設值，不改變背景圖片的原始高度和寬度；

2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設定為前面兩個值，當設定一個值時，將其作為圖片寬度值來等比縮放；

3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設定為所在元素寬高乘以前面百分比得出的數值，當設定一個值時同上；

4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；

5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。

css3學習第一天