CSS低频属性

Posted on Edited on In

自用笔记：本文属于自用笔记，不做详解，仅供参考。在此记录自己已理解并开始遵循的前端代码规范。What How Why

概况

安卓文字垂直居中

由于安卓无法通过height height-line

首行缩进

1
text-indent: 25px;

字母不换行

word-wrap: break-word;

文字省略

通过CSS判断，这个区域宽度

省略

1
2
3
4
<!-- 单行文本溢出 -->
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

一行省略

1
2
3
4
5
6
7
<!-- 多行文本溢出 -->
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

首字母大写

1
text-transform: capitalize;
值描述
none默认。定义带有小写字母和大写字母的标准的文本。
capitalize文本中的每个单词以大写字母开头。
uppercase定义仅有大写字母。
lowercase定义无大写字母，仅有小写字母。
inherit规定应该从父元素继承 text-transform 属性的值。

will-change

提高页面滚动、动画等渲染性能

元素可以点透

1
pointer-events: none;

移动端手机input输入内容自动移动

该效果只限于IOS，ando

1
filter: blur(-3px);

-webkit-text-size-adjust(失效)

  1. 当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}
  2. -webkit-text-size-adjust放在body上会导致页面缩放失效
  3. body会继承定义在html的样式
  4. 用-webkit-text-size-adjust不要定义成可继承的或全局的
1
-webkit-text-size-adjust: none;

以显示 10px 的字为例

1
2
3
4
5
6
7
8
9
.some-small-font {
  display: inline-block; /* Or block */
  font-size: 12.5px;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  position: relative;
  left: -12.5%;
  width: 125%;
}

输入框选择时无边框

1
outline: none;

可点击的元素时，覆盖显示的高亮颜色

1
-webkit-tap-highlight-color: rgba(0,0,0,0);

修改chrome记住密码后自动填充表单的背景颜色

1
2
3
4
5
input:-webkit-autofill, textarea:-webkit-autofill, select-webkit-autofill{
	background-color: #FFF;
	background-image: none;
	color: #000;
}

弹窗背景模糊

原理：使用高斯模糊，使得页面显示元素模糊，将样式加在body上，通过body的class实现的。row为指定要模糊的内容

1
2
3
4
5
6
7
8
9
10
body {
	-webkit-backface-visibility: hidden;
}
.modal-active .row {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
}

微信二维码无法识别

1
2
3
4
padding: size(240) 0 0 size(240) !important;
margin: size(-240) 0 0 size(-240) !important;
position: relative;z-index: 100;
-webkit-user-select: none;

背景bg设置

background: linear-gradient()

安卓微信overflow失效

CSS clip-path

http://www.cnblogs.com/coco1s/p/6992177.html

Web移动端Fixed布局的解决方案

http://efe.baidu.com/blog/mobile-fixed-layout/