分享一些冷门但却很实用的css样式
温馨提示:这篇文章已超过1109天没有更新,请注意相关的内容是否还可用!
在平常的代码工作中,有很多冷门不常用的css样式标签。有些偏门、冷门的标签一般都记不住,想起来的时候就又会去现找,很影响工作效率,现在,把这些标签都统一整理一下用的少但是超级实用的css样式。
::-Webkit-Input-Placeholder
input 的 H5 placeholder 属性,很好用,可以直接定义输入文本框里面的内容,唯一的缺点就是不能更改默认显示字体的颜色,不过我们可以直接利用::input-placeholder这个属性来设置字体颜色。
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: pink; } ::-moz-placeholder { /* Firefox 19+ */ color: pink; } :-ms-input-placeholder { /* IE 10+ */ color: pink; } :-moz-placeholder { /* Firefox 18- */ color: pink; }
使用 clearfix 清楚浮动,解决父类高度崩塌
.clearfix { zoom: 1; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; /* 内容为空 */ clear: both; height: 0; }
p::selection选中文本后的背景色
p::selection { background: rgb(188, 188, 188); color: #ffffff; }
calc() function, 计算属性值
div { width: calc(100% - 100px); }
outline属性值
不知道大家有没有一个困扰,就是在写input的时候,点击的时候总会有一个很丑的蓝色描边,但是找代码还找不到。这个其实很简单,用outline这个标签就可以很简单的解决掉这个烦人的问题。
div { outline: none; //移动浏览器默认的状态线 // outline: 5px dotted red; 也可以设置样式 }
Webkit-Playsinline
支持vedio视频在手机页面内部播放,不用全屏
<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>
Css实现文本的各种换行状态
//不换行 white-space:nowrap; //自动换行 word-wrap: break-word; word-break: normal; //强制换行 word-break:break-all;
-webkit-line-clamp
可以把 块容器 中的内容限制为指定的行数。并且在超过行数后,在最后一行显示"..." 这是正常的展示
display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/ -webkit-box-orient: vertical; /*值必须为vertical*/ -webkit-line-clamp: 2; /*值为数字,表示一共显示几行*/ overflow: hidden;
caret-color
用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。
caret-color: red;
暂时就记录这么多,后续将持续更新,是不是很实用,很多css样式在宁静致远、锦鲤、梦想家及博览主题都有用到,您发现了么?
文章版权声明:除非注明,否则均为老李笔记原创文章,转载或复制请以超链接形式并注明出处。
发表评论