常用偏门css样式有哪些(css,web开发)

::-webkit-input-placeholder

input 的 H5 placeholder属性，很好用，但不能直接改这个文字颜色，所以目前的解决方法就是用::input-placeholder属性来改。

小Tips: 配合 opacity 属性使用效果更佳哦！

偏门却又实用的 CSS 样式

::-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元素时显示的当前状态线（外发光）

偏门却又实用的 CSS 样式

这个状态线是用来提示用户当前状态指示作用，但因为效果很美观，建议去掉，或自己改个样式

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

To apply platform specific styling to an element that doesn&rsquo;t have it by default

To remove platform specific styling to an element that does have it by default

移除浏览器默认的样式，比如chrome的input默认样式

input, button, textarea, select { *font-size: 100%; -webkit-appearance:none; }

CSS开启硬件加速

-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, 计算属性值

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) { ... }