::-webkit-input-placeholder
input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placeholder属性来改。
小Tips: 配合 opacity 属性使用效果更佳哦!
::-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; }
@impor 嵌套样式表文件
使用它可以在样式表再次内嵌套样式表文件,比如一些组件 CSS可以使用,但不太推荐使用这个,因为加载时有可能会被漏掉。
@import url("reset.css"); @import url("global.css"); @import url("font.css");
outline 当点击input元素时显示的当前状态线(外发光)、点击a链接,出现虚线边框
这个状态线是用来提示用户当前状态指示作用,但因为效果不太美观,建议去掉,或自己改个样式
div { outline: none; //移动浏览器默认的状态线 // outline: 5px dotted red; 也可以设置样式 }
contenteditable 设置element是否可编辑
<p contenteditable="true">可编辑</p>
webkit-playsinline
手机video 都可以在页面中播放,而不是全屏播放了。
<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>
position: absolute, 让margin有效的
设置left:0, right:0 就可以。原因是2边都是0不存在边距,element就可以得出距离,并居中。
div { position: absolute; left: 0; right: 0; margin: 0 auto; }
使用 clearfix 清楚浮动,解决父类高度崩塌
.clearfix { zoom: 1; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
user-select 禁止用户选中文本
div { user-select: none; /* Standard syntax */ }
清除手机tap事件后element 时候出现的一个高亮
*{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
::-webkit-scrollbar-thumb
可以修改谷歌的滚动条样式,safari好像也可以
-webkit-appearance:none
移除浏览器默认的样式,比如chrome的input默认样式
input, button, textarea, select { *font-size: 100%; -webkit-appearance:none; }CSS开启硬件加速
http://www.cnblogs.com/rubylouvre/p/3471490.html
-webkit-transform: translateZ(0);
使用CSS transforms 或者 animations时可能会有页面闪烁的bug
-webkit-backface-visibility: hidden;
-webkit-touch-callout 禁止长按链接与图片弹出菜单
-webkit-touch-callout: none;
transform-style: preserve-3d 让元素支持3d
div { -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */ -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */ transform: rotateY(60deg); transform-style: preserve-3d; }
perspective 透视
这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。
.div-box { perspective: 400px; }
css实现不换行、自动换行、强制换行
//不换行 white-space:nowrap; //自动换行 word-wrap: break-word; word-break: normal; //强制换行 word-break:break-all;
box-sizing 让元素的宽度、高度包含border和padding
*{ box-sizing: border-box; }
calc() function, 计算属性值
https://www.w3schools.com/cssref/func_calc.asp
div { width: calc(100% - 100px); }
上面的例子就是让宽度为100%减去100px的值,项目中很适用,要IE9以上兼容。
css3 linear-gradient 线性渐变
默认开始在top, 也可以自定义方向。
div { linear-gradient(red, yellow) } background: linear-gradient(direction, color-stop1, color-stop2, ...);
常用的选择器 :nth-child() Selector
以下代码是选择父类下第一个子节点,p元素,建议学习这个样式属性的使用,很实用的。
p:nth-child(1) { ... }