背景 邊框和邊距相關屬性 學習總結

2021-10-02 12:55:29 字數 1257 閱讀 8902

css的乙個重要概念是盒模型。乙個html元素所占用的矩形區域可以稱之為乙個「盒子」。該矩形區域由內容區、內填充區、邊框區和外邊距區組成
background:用於設定物件的背景格式。其復合屬性包括:background-color(背景顏色)、background-image(背景)、background-repeat(背景重複模式   常用 no-repert)、background-attachment(背景是否隨物件內容滾動還是固定)、background-position(背景位置)

background-clip:用於設定背景覆蓋的範圍。

border-box:指定背景覆蓋盒模型的邊框區、內填充區、內容區。

no-clip:指定背景覆蓋盒模型的邊框區、內填充區、內容區。

padding-box:指定覆蓋盒模型的內填充區、內容區。

content-box:指定背景只覆蓋盒模型的內容區。

background-origin:用於設定背景覆蓋的起點。

linear-gradient(方向?顏色列表):線性漸變

漸變方向:

to top/bottom/left/right、to top left等。

ndeg:指定角度值。0deg代表12點方向,順時針轉動。

漸變顏色:

顏色1 位置1,顏色2 位置2,.................

repeating-linear-gradient: 迴圈線性漸變

radial-gradient:徑向漸變:形狀、大小、圓心、顏色列表

repeating-radial-gradient: 迴圈徑向漸變

border:常用格式:border:npx solid #***;

border-top/bottom/left/right-color/style/width:用於設定元素邊框的格式

漸變邊框:

border-top-colors(顏色值)

圓角邊框:

border-radius:npx npx npx npx;分別表示四個角的弧度

border-image-source:指定邊框。

border-image-slice:四個數值對邊框進行切割

opacity:n%;
padding:設定內填充距離。

margin:設定外邊距距離。

前端學習之背景 邊框和邊距相關屬性

background 設定物件的背景樣式。該屬性是 乙個復合屬性,可用於同時設定背景色 背景 背景重複模式等屬性。該屬性值格式如下 background color background image background repeat background attachment background...

CSS學習 文字排版,顏色,背景,邊框,邊距

調整字元間距 letter spacing normal 長度 調整單詞間距 word spacing normal 長度 新增文字修飾 text decoration underline overline line through blink none 設定文字排列方式 text align le...

CSS浮動和定位 邊框邊距

盒子邊框邊距 margin 外邊距 padding 內邊距 top 上邊距 left 左邊距 right 右邊距 bottom 下邊距 border 邊框 content 內容 浮動float left float right float none 預設 定位position static 靜態定位...