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當中,要為某個物件加上背景色只有一種辦法,那就是先做乙個 在 中設定完背景色...