day 4 CSS背景與邊框

2021-08-20 09:32:12 字數 2357 閱讀 7373

規定:乙個元素的背景=元素的內容+內邊距+邊界(邊框)下層的區域

屬性值

描述用法注意

background-color

為元素設定背景(預設為transparent)

預設值是transparent

background-image

把放入背景(可以是靜態檔案,也可以是生成的漸變)

注意此處與內容

如果同時設定了background-color和-image的後者會覆蓋掉前者

background-repeat

對頁面上的背景影象進行平鋪設定(預設水平垂直都平鋪)

值:no-repeat、repeat-x、repeat-y

background-position

設定影象在背景中的位置(如果只設定乙個值,則為水平值,而垂直自動為center)

background-attachment

設定背景影象是否固定或者或者頁面的其餘部分滾動(預設為滾動)

值:fixed、scroll、local(相容性不好)

background-origin

規定背景影象的定位區域(預設是padding-box)

如果background-attachment設定為fixed,該屬性自動失效

值:padding-box、content-box、border-box

background-clip

規定背景的繪製區域(預設為border-box)

值:padding-box、content-box、border-box

background-size

允許動態調整背景影象的大小(ie9一下不支援)

1)兩條邊的值設定 用px或者%都可以

2)cover圖擴到足夠大以至於覆蓋整個背景或者本身就很大但是部分顯示不完全

3)contain影象完全顯示出來,高度寬度完全適應內容區域

背景簡寫:background裡面屬性沒有順序要求(而且建議簡寫)

背景支援多背景一起設定(但ie8以下不支援多背景設定)--多個背景設定之後是堆疊在一起的 在屬性值書寫在前面的將覆蓋後面的。

例子:

background-image: url(image.png), url(background-tile.png);

background-repeat: no-repeat, repeat;

背景的漸變:背景的漸變是用linear-gradient()來實現漸變的

例如:

div
這個漸變效果是從上到下,從頂部的橙色開始,然後平穩過渡到底部的黃色。

可以使用關鍵字來指定方向 (to bottomto rightto bottom right等), 或角度值 (0deg相當於to top90deg相當於to right,直到360deg,它再次相當於to top

你可以個背景漸變設定每乙個顏色顯示的距離

例如:

div
元素邊框是圍繞元素內容和內邊距的一條線或者多條線(邊框是繪製在背景之上的)

屬性描述

屬性值與注意

border(簡寫)

組合邊框的書寫順序為:寬度、樣式、顏色

樣式是一定要給的

border-style

定義邊框的樣式可以組合書寫每條邊的樣式:border-style:上 右 下 左

或者單獨定義也可以:border-left-style:solid(設定左邊框為實線)

none(預設)、hidden、solid、dotted(點狀邊框)、dashed(虛線)、double(雙線)、inset、outset、groove(3d凹槽邊框)、ridge(3d壟裝邊框)

border-width

同上h值有:px、em、thin(細)、medium、thick(粗)

border-color

同上是有transparent屬性值的

border -radius   

單獨設定為:border-top-left-radius

設定圓角:border

-radius:20px

設定橢圓形角:border

-radius: 10px / 20px

Day4 CSS 顏色 字型 邊框 背景

使用英文單詞表示顏色 16進製表示顏色,一共六個數值,前兩個表示紅色,中間兩個表示綠色,後面表示藍色,取值範圍0 f,000000 表示黑色 簡寫 000,ffffff 表示白色 簡寫 fff rgb表示顏色,rgb 取值範圍0 255 帶透明度,rgba rgb取值範圍0 255,最後一位是透明度...

CSS揭秘 背景與邊框

css編碼技巧 font size 20px line height 1.5 1.半透明邊框 border 10px solid hsla 0,0 100 5 background white background clip padding box 2.多重邊框 background yellowg...

前端菜鳥筆記 Day 4 CSS布局

內容引用 css 框模型概述 css 框模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。元素的背景應用於 由內容和內邊距 padding 邊框 border 組成的區域。邊框以外是外邊距 margin 外邊距預設是透明的,因此不會遮擋其後的任何元素。內邊距 邊框...