css不常关注却突然用的的属性

发表于

animation-play-state

css属性规定动画正在运行还是暂停。paused/running (可用于暂停动图😏)

js: object.style.animationPlayState=”paused”

去除掉浏览器对输入框的自动补全

MSIE自定义了input 的扩展属性 autocomplete，置为off即可

用这个方法可以屏蔽MSIE，Firefox，chrome，opera则需要使用另一个扩展属性disableautocomplete

两扩展属性可以同时使用，浏览器会根据自身特性自动解析。

控制英文大小写

text-transform 也是为英文字符设计的，要么全大写 text-transform:uppercase， 要么全小写 text-transform:lowercase，

:first-letter

第一个字符或第一个串

:first-line

第一行

IE9 不认识 CSS3 渐变

writing-mode

就是用来实现文字竖向呈现的。

writing-mode: horizontal-tb;

writing-mode: vertical-rl;

writing-mode: vertical-lr;

writing-mode: lr-tb | tb-rl | tb-lr (IE8+);

writing-mode: horizontal-tb | vertical-rl | vertical-lr;

css线型

在用border的时候经常会忘记它有多少种线型以及各种线型的写法；每次都得从头开始，或是用到Google、百度之类的，有空整理了一下

（1）none (没有边框，无论边框宽度设为多大)
（2）dotted (点线式边框)
（3）dashed (破折线式边框)
（4）solid (直线式边框)
（5）double (双线式边框)
（6）groove (槽线式边框)
（7）ridge(脊线式边框)
（8）inset (内嵌效果的边框)
（9）outset (突起效果的边框)

white-space​​

值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 
 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

​

文本溢出展示省略号

一行

1
2
3
4
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width:200px

多行

1
2
3
4
5
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 行数
overflow: hidden;
text-overflow:ellipsis;
  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
  2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；