冷门但却很实用的 css 样式总汇
::-Webkit-Input-Placeholder
input 的 H5 placeholder 属性,很好用,可以直接定义输入文本框里面的内容,唯一的缺点就是不能更改默认显示字体的颜色,不过我们可以直接利用::input-placeholder 这个属性来设置字体颜色。
COPY
::-webkit-input-placeholder { |
使用 clearfix 清楚浮动,解决父类高度崩塌
COPY
.clearfix { |
p::selection 选中文本后的背景色
COPY
p::selection { |
calc function, 计算属性值
COPY
div { |
outline属性值
不知道大家有没有一个困扰,就是在写 input 的时候,点击的时候总会有一个很丑的蓝色描边,但是找代码还找不到。这个其实很简单,用 outline 这个标签就可以很简单的解决掉这个烦人的问题。
COPY
div { |
Webkit-Playsinline
支持 vedio 视频在手机页面内部播放,不用全屏。
COPY
<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video> |
Css 实现文本的各种换行状态
COPY
//不换行 |
-webkit-line-clamp
可以把 块容器 中的内容限制为指定的行数。并且在超过行数后,在最后一行显示”…” 这是正常的展示
COPY
display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/ |
caret-color
用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。
COPY
caret-color: red; |