CSS

来自百合仙子's Wiki
跳转到导航 跳转到搜索

TODO

各种整理

选择器

CSS金矿

link的四种状态，需要按照下面的前后顺序进行设置： 

a:link
a:visited
a:hover
a:active

位置

p:first-of-type /* 首字、首项 */
p:last-of-type

/* 指定某些项，在块状列表和表格中有用
 * 火狐 3.5.7、Chrome、Opera 10 中测试通过
 * */
.block:nth-of-type(3n+3)

属性

column

创建多栏文本。需要使用 -moz- 或 -webkit- 前缀。Opera 10.60- 不支持。

示例： 

div#multicolumn1 {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}
column-count
column-gap
column-width
column-rule
中间部分的样式（width, style and color）（火狐也支持）
column-span
跨栏元素（不被支持）

来源：http://www.quirksmode.org/css/multicolumn.html

text-shadow

示例见CSS代码片断#text-shadow。 

text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...

或者 

text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...

现在大部分浏览器都支持多层阴影，可以用逗号分开多组设置。

text-shadow的浏览器兼容性

目前 text-shadow 被 Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5支持，IE不支持。需要注意的是，Safari 只有4.0才支持多层阴影。

  • IE 各个版本都不支持 text-shadow；
  • Opera 9.5+支持最多6-9层阴影，并使用CSS2渲染顺序(最先定义的阴影在最下面)。而且出于性能的原因，模糊半径被限制到100px；
  • Gecko (Firefox)理论上支持无限层text-shadows (不过不建议尝试) 并遵循新的CSS3渲染顺序(最先定义的阴影在最上面)；
  • Safari 1.1-3.2只支持单层text-shadow (只显示第一个逗号之前的声明而无视后面的)。Safari 4.0+才支持多层阴影以及新的CSS3渲染顺序；

box-shadow

IE 不支持 box-shadow。

目前只有 Firefox3.5+ 和 safari/chrome 通过私有属性支持 box-shadow 属性。Presto 2.3支持 box-shadow。

box-shadow 的语法和 text-shadow 是一样的。 

#boxShadow{
-webkit-box-shadow:2px 2px 2px black;
-moz-box-shadow:2px 2px 2px black;
}

box-shadow 和 border-radius是很好的搭档： 

#boxShadow1 {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  border:1px solid ddd;
  -webkit-box-shadow:0 0 10px black;
  -moz-box-shadow:0 0 10px black;
  padding:10px;
}

CSS阴影详解

圆角

参见CSS3圆角详解 - 阮一峰的网络日志。

渐变

在火狐中的使用语法，参见火狐#渐变。 

element {
  background: -webkit-gradient(linear, 0 0, 0 30%, from(#bfbfbf), to(#ffffff));
  background: -moz-linear-gradient(top, #bfbfbf, #ffffff 30%);
}

参见Ultimate CSS Gradient Generator - ColorZilla.com。

cursor 属性

已知火狐和Chrome中，支持使用 cursor: none; 来隐藏鼠标指针。

另见：Cross Browser CSS cursor Images In Depth。

Introducing the New Cursor Styles in CSS3 - SitePoint，各种 CSS 2 和 CSS 3 指针形状。浏览器支持可能不准确。

输入法

禁用输入法： 

ime-mode: disabled;

滤镜

灰度滤镜，使整个页面变灰色[1]： 

html{
  filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox */
  filter:gray;
  -webkit-filter:grayscale(100%); /* Google Chrome */
}
/* for ie 9: */
.SKY *,.LAND *{filter:gray()\9\0}
.Tray {filter:gray(enabled=false)\9\0}

已知对 Opera 无效。对 Internet Explorer 7、8 有效，9 无效。对 IE 6 有效，但是测试搜狗首页时会发生内存错误。

demosthenes.info –Convert Images To Black And White With CSS

@-规则

屏幕方向和分辨率

方向，支持火狐和Google Chrome，不支持Opera 10.10。[2] 

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

分辨率（未实践）。 [3] [4] 

@media all and (max-device-width: 400px) {
/* 用于最大宽度400px的样式 */
}

网络字体

@font-face {
  font-family: 'JournalRegular';
  src: url('fonts/journal.eot');
  src: local('Journal'), local('Journal'), url('fonts/journal.woff') format('woff'), url('fonts/journal.ttf') format('truetype'), url('fonts/journal.svg#Journal') format('svg');
}

[5]

注意：在火狐中本地文件（ file:// ）无法使用网络字体。

字符编码

指定编码： 

@charset "gb2312";

按文档匹配

如 @document regexp('pattern') 按正则指定应用的页面。也支持一些其它的断言： url 、 url-prefix 、 domain 。[6]。目前（2014年3月11日）仅火狐支持，并且需要使用 -moz- 前缀。

字体

对于 emoji 字体，可以在 font-family 列表最后加上 emoji 字体名，不然可能 fallback 到别的黑白字体上。

参见

在线资源

资料

hack

Box Model Hack
欺骗IE5/Win的CSS hack
简化的Box Model Hack

外部链接

文档

基础

技巧

浏览器区别

原则

软件

工具

参考资料

  1. ↑ 2013年4月21日雅安地震期间取自搜狐微博
  2. ↑ iPad Orientation CSS
  3. ↑ PPK:orientation媒体查询
  4. ↑ Different Stylesheets for Differently Sized Browser Windows
  5. ↑ Gift Message Printer
  6. ↑ @document - CSS | MDN
  7. ↑ text-overflow - MDN
检索自“http://r.lilydjwg.me/w/index.php?title=CSS&oldid=3528”