分享更有价值
被信任是一种快乐

常用偏门css样式有哪些

文章页正文上

这篇文章主要为大家展示了“常用偏门css样式有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“常用偏门css样式有哪些”这篇文章吧。::-webkit-input-placeholderinput 的 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:noneTo apply platform specific styling to an element that doesn’t have it by defaultTo 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 让元素支持3ddiv { -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样式有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知免费云主机、域名识,欢迎关注云技术行业资讯频道!

相关推荐: 如何对div设置padding内边距样式

这篇文章主要介绍了如何对div设置padding内边距样式的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何对div设置padding内边距样式文章都会有所收获,下面我们一起来看看吧。 1、div直接设置padding 对div运…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册