css3背景與邊框

1顶霞、background-clip

定義: background-clip 屬性規(guī)定背景的繪制區(qū)域局雄。

語法:background-clip: border-box|padding-box|content-box;

參數(shù):border-box? 背景被裁剪到邊框盒司草。

padding-box? 背景被裁剪到內(nèi)邊距框

content-box? 背景被裁剪到內(nèi)容框

2、background-origin

定義: background-origin 屬性規(guī)定 background-position 屬性相對于什么位置來定位键思。

語法: background-origin: padding-box|border-box|content-box;

參數(shù): border-box? ? ? 背景圖像相對于邊框盒來定位

padding-box? ? 背景圖像相對于內(nèi)邊距框來定位谦屑。

content-box? ? 背景圖像相對于內(nèi)容框來定位

3、 background-size

定義:規(guī)定背景圖像的尺寸

語法:background-size: length|percentage|cover|contain;

參數(shù): length? 設置背景圖像的高度和寬度涛漂。第一個值設置寬度赏表,第二個值設置高度。如果只設置一個值 匈仗,則第二個值會被設置為 "auto"瓢剿。

percentage? 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度悠轩,第二個值設置高度间狂。如果只設置一個值,則第二個值會被設置為 "auto"火架。

cover? 把背景圖像擴展至足夠大鉴象,以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中何鸡。

contain? 把圖像圖像擴展至最大尺寸纺弊,以使其寬度和高度完全適應內(nèi)容區(qū)域

4、background-break

定義: 指定內(nèi)聯(lián)元素的背景圖像進行平鋪時的循環(huán)方式

語法:background-break: continuous |bounding-box|each-box;

參數(shù): continuous 背景圖像相對于內(nèi)邊距框來定位音比。

bounding-box? ? ? 背景圖像相對于邊框盒來定位

each-box? ? ? ? ? 背景圖像相對于內(nèi)容框來定位

5俭尖、在一個元素中顯示多個背景圖像

概述:css3中規(guī)定了一個元素可以顯示多個背景圖像氢惋,這就是一個新的規(guī)定洞翩。

div{

background:url("flower-red.png"),

url("flower-green.png"),

url("sky.png");

background-repeat:no-repeat, repeat-x, no-repeat;

background-position:3% 98%,85%,center,center,top;

width:300px;

padding:90px 0px;

}

6、圓角和邊框border-radius

定義:屬性是一個簡寫屬性焰望,用于設置四個 border-*-radius屬性

語法: border-radius: px|% px|%;

7骚亿、使用圖像邊框border-image

定義:border-image 屬性是一個簡寫屬性,用于設置以下屬性

border-image-source? ? ? 用在邊框的圖片的路徑熊赖。

border-image-slice? ? ? ? 圖片邊框向內(nèi)偏移

border-image-width? ? ? ? 圖片邊框的寬度来屠。

border-image-outset? ? ? 邊框圖像區(qū)域超出邊框的量。

border-image-repeat? ? ? 圖像邊框是否應平鋪(repeated)震鹉、鋪滿

(rounded)或拉伸(stretched)俱笛。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市传趾,隨后出現(xiàn)的幾起案子迎膜,更是在濱河造成了極大的恐慌,老刑警劉巖浆兰,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件磕仅,死亡現(xiàn)場離奇詭異珊豹,居然都是意外死亡,警方通過查閱死者的電腦和手機榕订,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進店門店茶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人劫恒,你說我怎么就攤上這事贩幻。” “怎么了两嘴?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵段直,是天一觀的道長。 經(jīng)常有香客問我溶诞,道長鸯檬,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任螺垢,我火速辦了婚禮喧务,結果婚禮上,老公的妹妹穿的比我還像新娘枉圃。我一直安慰自己功茴,他們只是感情好,可當我...
    茶點故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布孽亲。 她就那樣靜靜地躺著坎穿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪返劲。 梳的紋絲不亂的頭發(fā)上玲昧,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天,我揣著相機與錄音篮绿,去河邊找鬼孵延。 笑死,一個胖子當著我的面吹牛亲配,可吹牛的內(nèi)容都是我干的尘应。 我是一名探鬼主播,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼吼虎,長吁一口氣:“原來是場噩夢啊……” “哼嘱吗!你這毒婦竟也來了掘鄙?” 一聲冷哼從身側響起曹阔,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤儡循,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后官辈,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體箱舞,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡遍坟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了晴股。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片愿伴。...
    茶點故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖电湘,靈堂內(nèi)的尸體忽然破棺而出隔节,到底是詐尸還是另有隱情,我是刑警寧澤寂呛,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布怎诫,位于F島的核電站,受9級特大地震影響贷痪,放射性物質發(fā)生泄漏幻妓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一劫拢、第九天 我趴在偏房一處隱蔽的房頂上張望肉津。 院中可真熱鬧,春花似錦舱沧、人聲如沸妹沙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽距糖。三九已至,卻和暖如春牵寺,著一層夾襖步出監(jiān)牢的瞬間悍引,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工缸剪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留吗铐,地道東北人。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓杏节,卻偏偏與公主長得像,于是被迫代替她去往敵國和親典阵。 傳聞我的和親對象是個殘疾皇子奋渔,可洞房花燭夜當晚...
    茶點故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內(nèi)容

  • CSS邊框屬性 元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。 元素的邊框屬性: border 簡寫屬性壮啊,用...
    Zd_silent閱讀 983評論 0 1
  • 1嫉鲸、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,631評論 0 7
  • 話題背景:如今網(wǎng)頁展示的姿勢是這樣的 圖片來自:設計之家 炫酷的網(wǎng)頁展示,支撐它的正是強大的CSS3歹啼,還有什么理由...
    aliensq閱讀 2,035評論 0 2
  • background應該是CSS里使用頻率頗高的屬性玄渗,簡單實用座菠。但參數(shù)偏多,本篇就介紹一下background的各...
    張歆琳閱讀 4,279評論 4 26
  • 明天和意外永遠不知道誰會先到來藤树,因此真正明白向死而生的含義浴滴,那我們就能活的精彩,真正做到追隨自己內(nèi)心的聲音(讀后感)
    乾小龍閱讀 183評論 0 0