CSS3 知識點總結

2021-07-24 03:17:26 字數 1937 閱讀 9820

1.border-radius:

border-radius設定的值越大,弧度越大,可以用具體數值10px來設定,也可以用20% 百分比來設定;你也可以只設定乙個或其中幾個角的弧度,就像這樣:

div

2.box-shadow:

用來設定乙個下拉陰影得框,語法如下:

box-shadow: h-shadow v-shadow blur spread color inset;值說明

h-shadow

必須的,表示水平陰影的位置,負值表示反方向的

v-shadow

必須的,表示豎直陰影的位置,負值同樣表示反方向

blur

可選的,表示模糊程度,越大越模糊

spread

可選,陰影的大小

color

可選,顏色

inset

可選。從外層的陰影(開始時)改變陰影內側陰影

background-image:

div

還可以寫一塊

div

background-size:
div

background-origin:

background-origin屬性指定了背景影象的位置區域。

content-box, padding-box,和 border-box區域內可以放置背景影象。

background-clip:

css3中background-clip背景剪裁屬性是從指定位置開始繪製。

text-shadow:

新增文字陰影,類似於box-shadow;

white-space:nowrap;//強制不換行

text-overflow:ellipsis;//超出部分用…顯示

text-overflow:clip;//超出剪下掉

word-wrap:break-word;//允許長文字換行

word-break:break-all;//允許拆分換行

word-break:keep-all;//不允許拆分換行

@font-face

p

transform:translate(50px,100px):

translate()方法,根據左(x軸)和頂部(y軸)位置給定的引數,從當前元素位置移動。

transform:rotate(30deg);

表示以中心為原點順時針旋轉30個弧度,負數表示逆時針旋轉;

transform:scale(2,3);

表示橫向和縱向增大的倍數,上面就表示橫向擴大2倍,豎向擴大3倍;

transform:skew(20deg,30deg);

表示繞x和y軸傾斜的度數;

這幾個方法(不包含rotate())都可以單獨設定在x或y上的值;像這樣translatex(20px);

rotatex(30deg);rotatey(20deg);

表示繞x軸或者y軸進行立體轉換,

tansition

1.指定要新增效果的css屬性,

2.指定效果的持續時間。

transition:width 2s,heigth 3s;

也可以分開定義;

div

@keyframes 規則:

@keyframes規則是建立動畫。 @keyframes規則內指定乙個css樣式和動畫將逐步從目前的樣式更改為新的樣式。

css3動畫

@keyframes myfirst

25%

50%

75%

100%

}div

div

CSS3 知識點總結(學習筆記)

浮雕 color ddd text shadow 1px 1px 000,1px 1px fff 鏤刻 color ddd text shadow 1px 1px 000,1px 1px fff 錯亂效果 火焰效果等 chrome實現的,配合字型simsun,70版本以上 webkit text s...

CSS3常用知識點

1 css3選擇器 1.1 屬性選擇器 e attr val 表示的乙個單獨的屬性值 這個屬性值是以空格分隔的 attr2 a class kawa e attr val 表示的要麼乙個單獨的屬性值 要麼這個屬性值是以 分隔的 attr3 a class kawa e attr val 表示的屬性值...

CSS3基本知識點總結 1

1.css3邊框 邊框屬性 border radius 建立圓角邊框 box shadow 附加乙個或者多個下拉框的陰影 border image 不支援ie 使用影象建立乙個邊框 2.css3圓角 可以使用css3 圓角製作器來製作乙個css3圓角,可以直接生成 3.指定border radius...