好程序員web前端分享CSS3文本屬性

瀏覽器前綴的簡介及應用

好程序員web前端分享css3文案屬性，某些CSS屬性還只是最新版的預覽版，並未發佈成最終的正式版，而大部分瀏覽器已經爲這些屬性提供了支持，但這些屬性是小部分瀏覽器專有的；有些時候，有些瀏覽器爲了擴展某方面的功能，它們會選擇新增的一些CSS屬性，這些自行擴展的CSS屬性也是瀏覽器專屬的。爲了讓這些瀏覽器識別這些專屬屬性，CSS規範容許在CSS屬性前增長各自的瀏覽器前綴。

文本陰影屬性語法及應用

說明：水平、垂直陰影的位置容許負值 可進行多陰影設置

文本換行的相關屬性

Word-wrap

屬性值：
normal
說明：只在容許的斷字點換行（瀏覽器保持默認處理）
break-word
說明：屬性容許長單詞或 URL 地址換行到下一行。
屬性用來標明是否容許瀏覽器在單詞內進行斷句，這是爲了防止當一個字符串太長而找不到它的天然斷句點時產生溢出現象。

Word-break

屬性值：
break-all
說明：它斷句的方式很是粗暴，它不會嘗試把長單詞挪到下一行，而是直接進行單詞內的斷句
Keep-all
說明：文本不會換行，只能在半角空格或連字符處換行。

@font-face

@font-face是CSS3中的一個模塊，他主要是把本身定義的Web字體嵌入到你的網頁中，隨着@font-face模塊的出現，咱們在Web的開發中使用字體不怕只能使用Web安全字體（@font-face這個功能早在IE4就支持）

@font-face的語法規則：@font-face {
font-family: <YourWebFontName>; 
src: <source> [<format>][,<source> [<format>]]*; 
[font-weight: <weight>]; 
[font-style: <style>]; 
}

@font-face語法說明：

一、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如「font-family:"YourWebFontName";」 
二、source:此值指的是你自定義的字體的存放路徑，能夠是相對路徑也能夠是絕路徑； 
三、format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有如下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等； 
四、weight和style:這兩個值你們必定很熟悉，weight定義字體是否爲粗體，style主要定義字體樣式，如斜體。

實例：@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

CSS3 背景的新增屬性

一、Background-origin 背景原點

說明：指定background-origin屬性應該是相對位置屬性值：padding-box 背景圖像填充框的相對位置 
border-box 背景圖像邊界框的相對位置 
content-box 背景圖像的相對位置的內容框 
注：默認值爲：padding-box;

二、Background-clip 背景裁切

說明：background-clip 屬性規定背景的繪製區域。屬性值：border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到內邊距框。
content-box 背景被裁剪到內容框
。 
注：默認值：border-box;

三、Background-size 背景尺寸

說明：background-size 規定背景圖像的尺寸屬性值：length
規定背景圖的大小。第一個值寬度，第二個值高度。

Percentage(%)
以百分比爲值設置背景圖大小

cover
把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域

contain
把圖像圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域。

四、css3多背景屬性

Eg:p{ background:url(demo.gif) no-repeat; //這是寫給不識別下面這句的默認背景圖片
background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //這是高級瀏覽器的css多重背景，第一個最上面 
background-color:yellow; //這是定義的默認背景顏色，所有適合 }

CSS3 顏色特性

一、rgba 顏色模式

二、 Hsl 顏色模式（瞭解）

三、 Hsla 顏色模式（瞭解）

CSS3 邊框的新增屬性

一、border-color

EG:border-color:red green #000 yellow;(上右下左)

二、border-image

border-image 屬性是一個簡寫屬性，用於設置如下屬性:
border-image-source 用在邊框的圖片的路徑。
border-image-slice 圖片邊框向內偏移。
border-image-repeat 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)
border-image-outset 邊框圖像區域超出邊框的量

三、Border-radius 圓角邊框

(1).box{     border-radius: 5px 10px 20px 50px          }

(2).div1{border-radius: 2em/1em}

以斜槓/分開後面的參數:
第一個參數表示圓角的水平半徑，第二個參數表示圓角的垂直半徑

(3).div1{         border-radius:10px 20px 30px 40px/40px 30px 20px 10px }

按順時針的順序，斜槓/左邊是四個圓角的水平半徑，右邊是四個圓角的垂直半徑，可是一般咱們不多寫右邊的參數，那就是默認右邊等於左邊的值。

四、box-shadow 盒子陰影

屬性值：

Eg:box-shadow: 10px 10px 5px #888888