css3基本語法

2021-09-24 17:40:11 字數 1125 閱讀 5395

1.css邊框 圓角效果  border-radius

2.css邊框 陰影  box-ahadow  box-shadow: x軸偏移量 y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];

3.css邊框 陰影  **影。

4.css邊框 為邊框應用 border-image:url(borderimg.png) 70 repeat

5.css顏色 rgba  color:rgba(r,g,b,a)

6.css顏色 漸變色彩 linear-gradient(to top left ,blue ,red)

7.css3文字與字型 text-overflow   text-overflow用來設定是否使用乙個省略標記(...)標示物件內文字的溢位。

8.css3文字與字型 嵌入字型@font-face

9.css3文字與字型 文字陰影text-shadow text-shadow: x-offset y-offset blur color; 前兩個為偏移值,第三個為模糊程度,最後乙個為顏色

10.css3背景 background-origin background-origin : border-box | padding-box | content-box;

11.css3背景 background-clip

12.css3背景 background-size background-size: auto | 《長度值》 | 《百分比》 | cover | contain

13.css3背景 multiple backgrounds

14.css3選擇器 屬性選擇器

a[class^=icon]

a[href$=pdf]

a[title*=more]

15.css3 結構性偽類選擇器—root

:root

16.css3 結構性偽類選擇器—not

input:not([type="submit"])

17.css3 結構性偽類選擇器—empty

p:empty ​

18.css3 結構性偽類選擇器—target

content for brand

content for jake

content for aron

css3 語法要點

語法要點 display webkit box 老版本語法 safari,ios,android browser,older webkit browsers.display moz box 老版本語法 firefox buggy display ms flexbox 混合版本語法 ie 10 dis...

Css3基本用法

1.border image 將規定為包圍 div 元素的邊框 1.border image source 用在邊框的的路徑。border image slice 邊框向內偏移。border image width 邊框的寬度。border image outset 邊框影象區域超出邊框的量。bor...

css3動畫基礎語法01

一,動畫的使用必須要準備 1,準備動畫 keyframes關鍵字定義 2,需要為想要使用動畫的dom元素 新增一系列的動畫屬性。1,定義動畫 keyframes toright to 2,準備class 內部定義了動畫的各種效果 animation 動畫屬性的符合寫法 animation oneli...