CSS 笔记

发表于 | 更新于 | 分类于

last update: 2018-01-10

主要记录一些平时很少用到，但可能会忘记的点。

fastclick导致单选按钮需要点击两次

1
2
3
label > * {
  pointer-events: none;
}

定义选中样式

如：

1
::selection {color:#09c;}

移动端开发字体设置

1
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

div文字垂直居中

1
<div>我要垂直居中！</div>
1
div { height: 100px; display: table-cell; vertical-align: middle; }

用CSS做三角形

1
<div></div>
1
div { height: 0; width: 0; margin-bottom: 1em; }

向上的：

1
2
3
border-left: 5px solid transparent;
border-right: 5px solid transparent;å
border-bottom: 5px solid #09c;

等边三角形，需要计算底边宽度（左边宽+右边宽*0.866=8.66）：

1
border-bottom: 9px solid #09c;

用box-shadow做纸张层叠效果

jsFiddle地址

清除ios原生控件样式与点击时闪现的透明层

1
2
3
4
* {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}