CSS3的幾個標籤速記3

transition：css3過渡     css3裡很好的乙個標籤，可以非常方便的完成需要很多js才能完成的動態效果

例語法：transition：width 2s,height 2s,transform 2s;

css3動畫

@keyframes:使一種樣式逐漸變為另一種樣式的過程

1

doctype html
>
2<
html
>
3<
head
>
4<
style
>
5div627
28@keyframes myfirst
2931
25% 
3250% 
3375% 
34100% 35}
3637
@-webkit-keyframes myfirst 
/*safari and chrome 
*/38
4025% 
4150% 
4275% 
43100% 44}
45style
>
46head
>
47<
body
>
4849
<
p><
b>注意:
b> 該例項在 internet explorer 9 及更早 ie 版本是無效的。
p>
5051
<
div>
div>
5253
body
>
54html
>

css3多列

column-count：指定需要分割的列數     語法：column-count：--；

columnn-gap：列之間的距離     語法：column-gap：--px;

column-rule-style:solid;     column-rule-gap:--px;     column-rule-color：----；邊框樣式和厚度顏色

直接簡寫column-rule：solid 1px blue;

column-width:--px;列的寬度

column-span：all；指定元素跨過所有列

outline：不佔空間的輪廓     css3提供outline-offset：--px；使輪廓與邊框中間隔指定的間隙

img實現自動按比例縮放

檢視大圖功能

1

doctype html
>
2<
html
>
3<
head
>
4<
style
>5a 
1213
a:hover 
16style
>
17head
>
18<
body
>
1920
<
h2>縮圖作為連線
h2>
21<
p>我們使用 border 屬性來建立縮圖。在外層新增乙個鏈結。
p>
22<
p>點選檢視效果：
CSS3幾個速記標籤2
font face如果要使用粗體，必須新新增另乙個包含粗體文字的 font face規則 css2d轉換 translate 方法 根據左和上給定引數 語法 transform translate px,px rotate 方法 旋轉，允許負值 語法 transform rotate deg sca...
CSS3的快速記憶
border radius 25px box shadow 10px 10px 5px 888888 這個屬性挺重要的,特別是做的效果時.box shadow 陰影的x偏移值,陰影的y偏移值,模糊值,陰影大小,陰影顏色 其中偏移值可以為負數,陰影大小為0時是與原來一樣大,模糊值越大越模糊 borde...
css3常用的幾個
變形 translate 位移 translatex x translatey y 水平 垂直方向 translate x,y 語法 tranform translate x,y scale 縮放 scalex x scaley y x軸縮放 y軸縮放 scale x,y 語法 transform ...