CSS @规则

CSS 中常见的 @规则

@font-face

IE9 (只支持 .eot 类型的字体)以上
Firefox, Chrome, Safari, Opera 支持 .ttf, .otf 两种类型字体.

1
2
3
4
5
6
7
8
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9 */
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}

@page

控制打印

1
2
3
4
5
6
7
8
9
10
11
12
13
14
```

## @media

IE9 以上, 语法 @media mediatype and|not|only (media feature) { CSS-Code; }

mediatypescreen, print (用于打印机和打印预览), speech (应用于屏幕阅读器等发声设备)

```css
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}

@support

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```

## @keyframes

创建动画是通过逐步改变从一个CSS样式设定到另一个。IE10 以上

```css
@keyframes mymove {
from { top: 0px }
to { top: 200px }
}

@keyframes fade {
0 { opacity: 0 }
50% { opacity: 0.5 }
100% { opacity: 1 }
}
# rules

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×