在css3中，復(fù)合屬性又稱“簡寫屬性”，指的是可以在一個(gè)聲明中同時(shí)書寫多個(gè)屬性代碼、控制多種樣式的屬性；例如border屬性，就可以在一個(gè)聲明中控制邊框?qū)挾?、邊框樣式和邊框顏色?/p>

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css3中，復(fù)合屬性又稱“簡寫屬性”，指的是可以在一個(gè)聲明中同時(shí)設(shè)置多個(gè)屬性、控制多種樣式的屬性。

我們知道border屬性可以同時(shí)規(guī)定邊框的粗細(xì)、顏色和邊框類型。例如:

border:2px solid blue;

所謂復(fù)合屬性就是類似于border這樣的屬性，能夠一個(gè)屬性規(guī)定對(duì)象的多種樣式。比較常用的復(fù)合屬性有font、border、margin、padding和background等。當(dāng)然這些屬性也是可以拆分的，例如border屬性就可以拆分為：border-color、border-width和border-style。

CSS 常用復(fù)合屬性

background

// background: background-color background-image background-repeat background-attachment background-position/background-size // background: 背景色 圖片地址 是否重復(fù) 是否固定 定位/圖片尺寸  background: #fff url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2657596156,4172056089&fm=26&gp=0.jpg) no-repeat fixed 0 0/100%

注意background-attachment和background-size會(huì)互相影響

animation

// animation: name duration timing-function delay iteration-count direction fill-mode play-state; // animation: 動(dòng)畫名稱 動(dòng)畫時(shí)長 動(dòng)畫函數(shù) 延遲時(shí)間 動(dòng)畫次數(shù) 動(dòng)畫方向 動(dòng)畫狀態(tài) 動(dòng)畫運(yùn)行或者暫停 animation: move 5s linear 0s infinite alternate both running;

注意animation屬性里有一些是可以直接省略的，比如animation-direction animation-fill-mode animation-play-state，每個(gè)屬性效果都會(huì)有默認(rèn)值，詳細(xì)可參考文檔

border

// border: width style color; // border: 寬度 邊框類型 邊框顏色 border: 2px dashed #000;

outline

// outline: width style color; // outline: 寬度 邊框類型 邊框顏色 outline: 2px dashed #000;

outline不占空間，上述示例可看出outline會(huì)層疊在一起

border-image

//  border-image: source slice width outset repeat; // border-image: 圖片路徑 偏移 邊框?qū)挾?圖像區(qū)域超出的量 邊框圖片重復(fù)類型 border-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576497337284&di=26ef95dbb3b7e1a4766732e6f95f1e8d&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F39%2F06%2F4556d5b0a022b0a.jpg) 100 100 100 100 round;

著重注意background-image-slice屬性，正確切割才能得到理想顯示

box-shadow

// box-shadow: h-shadow v-shadow blur spread color inset; // box-shadow: 水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 陰影類型 box-shadow: 2px dashed #000;

font

// font: style variant weight size/line-height family; // font: 字體樣式 字體異體 字體粗細(xì) 字體字號(hào)/行高 字體系列 font: italic small-caps bold 24px/50px Serif;

list-style

// list-style: type position image; // list-style: 標(biāo)記類型 標(biāo)記位置 標(biāo)記圖像； list-style:lower-roman inside; list-style: inside url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=167525435,1152422064&fm=26&gp=0.jpg);

設(shè)置圖片之后，類型屬性將失效

transition

// transition: property duration timing-function delay; // transition: 過渡屬性 過渡時(shí)長 過渡效果 過渡延時(shí)； transition: width 1s linear 0s;

設(shè)置圖片之后，類型屬性將失效

padding

// padding: 上 右 下 左； // padding: 上 左右 下； // padding: 上下 左右； // padding: 上下左右； padding: 10px 11px 12px 13px; padding: 10px 20px 13px; padding: 10px 20px; padding: 10px;

margin

// margin: 上 右 下 左； // margin: 上 左右 下； // margin: 上下 左右； // margin: 上下左右； margin: 10px 11px 12px 13px; margin: 10px 20px 13px; margin: 10px 20px; margin: 10px;

（學(xué)習(xí)視頻分享：css視頻教程）