常用偏门css样式有哪些

这篇文章主要为大家展示了“常用偏门css样式有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“常用偏门css样式有哪些”这篇文章吧。

站在用户的角度思考问题，与客户深入沟通，找到北票网站设计与北票网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网站空间、企业邮箱。业务覆盖北票地区。

::-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是否可编辑

可编辑

webkit-playsinline

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

以上是“常用偏门css样式有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！