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-directionanimation-fill-modeanimation-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://bpic.588ku.com/element_origin_min_pic/00/39/06/4556d5b0a022b0a.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視頻教程)
更多關(guān)于云服務(wù)器,域名注冊(cè),虛擬主機(jī)的問題,請(qǐng)?jiān)L問西部數(shù)碼官網(wǎng):m.ps-sw.cn