CSS低频属性

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

概况

首行缩进

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/

×

纯属好玩

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 概况
    1. 1.1. 首行缩进
    2. 1.2. 字母不换行
    3. 1.3. 文字省略
      1. 1.3.1. 省略
      2. 1.3.2. 一行省略
    4. 1.4. 首字母大写
    5. 1.5. will-change
    6. 1.6. 元素可以点透
    7. 1.7. 移动端手机input输入内容自动移动
    8. 1.8. -webkit-text-size-adjust(失效)
    9. 1.9. 输入框选择时无边框
    10. 1.10. 可点击的元素时,覆盖显示的高亮颜色
    11. 1.11. 修改chrome记住密码后自动填充表单的背景颜色
    12. 1.12. 弹窗背景模糊
    13. 1.13. 微信二维码无法识别
    14. 1.14. 背景bg设置
    15. 1.15. 安卓微信overflow失效
    16. 1.16. CSS clip-path
    17. 1.17. Web移动端Fixed布局的解决方案
,