CSS非布局樣式背景 邊框

2021-10-02 23:35:15 字數 2579 閱讀 6965

hsla(60,100%,50%) 四個引數: 顏色(0-360)、飽和度、亮度、透明度

hsl()可以不設透明度

漸變色背景

background:

-webkit-linear-

gradient

(left, red, green)

;background: linear-

gradient

(to right, red, green)

;

demo1裡第乙個引數為xxdeg的是角度

還可以做多色漸變,見demo1

background: linear-

gradient

(135deg, transparent 0

, transparent 49.5

%, green 49.5

%, green 50.5

%, transparent 50.5

%, transparent 100%)

, linear-

gradient

(45deg, transparent 0

, transparent 49.5

%, red 49.5

%, red 50.5

%, transparent 50.5

%, transparent 100%)

; background-size:

30px 30px;

第一行**就像在50的地方畫了一條綠線,background-size設成30*30,就會直接平鋪,第二行**是反方向畫線,最後效果是一條網格線

文字代表本身,可以自己做base64轉換器。轉base64, 體積變原本的4/3,節省a鏈結數,但是檔案體積增大,增大1/3,放到了css檔案中,因此只適用於小圖示,少量,減少了http請求數,增大了體積的開銷,增大瞭解碼的開銷。

兩倍圖,三倍圖

<

!doctype html>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

background<

/title>

body

.c1.c2

<

/style>

<

/head>

="c1"

>

<

/div>

="c2"

>

<

/div>

<

/body>

<

/html>

<

!doctype html>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

background<

/title>

.c1.c2

.c3<

/style>

<

/head>

="c1"

>

<

/div>

="c2"

>

<

/div>

="c3"

>

<

/div>

<

/body>

<

/html>見demo3 c1

見demo3 c2 真實場景不大用

見demo3 c3

c3的width=1px的時候就是個三角形

<

!doctype html>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

border<

/title>

.c1.c2

.c3<

/style>

<

/head>

="c1"

>

<

/div>

="c2"

>

<

/div>

="c3"

>

<

/div>

<

/body>

<

/html>

非布局樣式 背景

背景三種方式 rgba 255,0,0,0.3 線性漸變 webkit linear gradient left,red,green 多段漸變linear gradient 135deg,red 0,green 10 yellow 50 blue 100 漸變畫網格在這裡插入 片background...

邊框樣式 背景樣式

1 邊框屬性 屬性說明 border width 邊框的寬度 border style 邊框的外觀 border color 邊框的顏色 border style 屬性值說明 none 無樣式hidden 與 none 相同。bug應用於表除外。對於表,hidden用於解決邊框衝突 solid 實線...

css背景樣式css背景樣式

css背景樣式 css背景樣式 序號中文說明 標記語法 1背景顏色2背景 3背景重複 4背景固定 5背景定位 6背影樣式 1 背景顏色 background color 語法 說明 引數取值和顏色屬性一樣 注意 在 html當中,要為某個物件加上背景色只有一種辦法,那就是先做乙個 在 中設定完背景色...