瘋狂H5筆記 背景和邊框相關屬性

2021-07-24 11:04:13 字數 1634 閱讀 2341

background-attachment:設定背景是隨著物件內容滾動還是固定,有兩個屬性值:

scroll:隨元件內容的滾動而滾動

background-position:設定背景的位置,乙個值表示橫座標,縱座標預設50

%;兩個值分別表示橫縱座標

background-repeat:設定背景的鋪展方式:屬性值有:repeat、no-repeat、repeat-x、repeat-y;分別對應:橫向縱向同時平鋪、不平鋪、橫向平鋪、縱向平鋪

background-clip:設定背景覆蓋的範圍。屬性值有:

border-box:指定背景覆蓋border、padding、content

no-clip:指定背景覆蓋border、padding、content

padding-box:指定背景覆蓋padding、content

content-box:指定背景覆蓋content

background-size:設定背景的大小,屬性有兩個值組成,分別代表的寬度和高度,形如:background-size: 100%50

%;

2.css支援多背景,依然是通過background-image/background-repeat/background-position/background-size等屬性來控制的,只是允許指定多個屬性值,使用逗號來隔開如下:

多個背景title>

#div1

script>

head>

id="div1">

div>

body>

html>

3.border是乙個復合屬性,用於同時設定邊框的粗細、線條和顏色。分別對應於:border-width/border-style/border-color。其中線條屬性值支援如下:

none:無邊框

hidden:隱藏邊框

dotted:點線邊框

dashed:虛線邊框

solid:實線邊框

double:雙線邊框

groove:3d凹槽邊框

rigde:3d凸槽邊框

inset:3d凹入邊框

outset:3d凸入邊框

4.css3提供了四個屬性來支援漸變邊框:

border-top-colors:設定目標元件的上邊框的漸變顏色。如果設定上邊框的寬度為npx,那麼就可以為該屬性設定n個顏色值

border-right-colors:...

border-bottom-colors:...

border-left-colors:...

5.css3提供了四個屬性來支援圓角邊框:

border-top

-left

-radius:指定左上角的圓角半徑

border-top

-right

-radius:指定右上角的圓角半徑

border-bottom

-left

-radius:指定左下角的圓角半徑

border-bottom

-right

-radius:指定右下角的圓角半徑

瘋狂H5筆記 盒模型與布局相關屬性

float 控制目標html元件的浮動方向。有屬性值 left right clear 設定目標html元件的左右是否允許出現浮動物件 有屬性值 none left right both overflow 設定當目標元件內容溢位時的溢位內容顯示方式。有屬性值 visible auto hidden ...

瘋狂H5講義 大小 定位 輪廓相關屬性

1.css3新增box sizing屬性,用於指定當前元素所設定的width和height屬性是指定哪一塊,目前只有firefox瀏覽器支援該屬性,因此需要新增 moz 字首使用 1.content box 指定width和height設定的是內容區也就是content的寬度和高度 2.paddin...

H5筆記04 表單form

html5中表單提交的新方式 表單元素可以不用被標籤包圍。只需要給標籤設定乙個id,然後把要關聯起來的表單元素加上form id 即可 經測試ie無效 type email 限制使用者輸入必須為email型別 type url 限制使用者輸入必須為url型別 type date 限制使用者輸入必須為...