CSS 很经常被用到,今天说一下 CSS 样式很偏门的一些技巧。什么是偏门,就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 CSS 样式。
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;
- }
使用它可以在样式表再次内嵌套样式表文件,比如一些组件 CSS 可以使用,但不太推荐使用这个,因为加载时有可能会被漏掉。
- @import url("reset.css");
- @import url("global.css");
- @import url("font.css");
这个状态线是用来提示用户当前状态指示作用,但因为效果很美观,建议去掉,或自己改个样式
- div {
- outline: none; //移动浏览器默认的状态线
- // outline: 5px dotted red; 也可以设置样式
- }
- <p contenteditable="true">
- 可编辑
- </p>
手机 video 都可以在页面中播放,而不是全屏播放了。
- <video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>
设置 left:0, right:0 就可以。原因是 2 边都是 0 不存在边距,element 就可以得出距离,并居中。
- div {
- position: absolute;
- left: 0;
- right: 0;
- margin: 0 auto;
- }
- .clearfix {
- zoom: 1;
- }
- .clearfix:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
- div {
- user-select: none; /* Standard syntax */
- }
- *{
- -webkit-tap-highlight-color: rgba(0,0,0,0);
- }
可以修改谷歌的滚动条样式,safari 好像也可以
移除浏览器默认的样式,比如 chrome 的 input 默认样式
- input, button, textarea, select {
- *font-size: 100%;
- -webkit-appearance:none;
- }
http://www.cnblogs.com/rubylouvre/p/3471490.html
- -webkit-transform: translateZ(0);
- -webkit-backface-visibility: hidden;
- -webkit-touch-callout: none;
- div {
- -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
- -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
- transform: rotateY(60deg);
- transform-style: preserve-3d;
- }
这个属性的存在决定你看到的元素是 2d 还是 3d。一般设置在包裹元素的父类上。
- .div-box {
- perspective: 400px;
- }
- //不换行
- white - space: nowrap;
- //自动换行
- word - wrap: break - word;
- word -
- break: normal;
- //强制换行
- word -
- break: break - all;
- {
- box-sizing: border-box;
- }
https://www.w3schools.com/cssref/func_calc.asp
- div {
- width: calc(100% - 100px);
- }
上面的例子就是让宽度为 100% 减去 100px 的值,项目中很适用,要 IE9 以上兼容。
默认开始在 top, 也可以自定义方向。
- div {
- linear-gradient(red, yellow)
- }
- background: linear-gradient(direction, color-stop1, color-stop2, ...);
以下代码是选择父类下第一个子节点,p 元素,建议学习这个样式属性的使用,很实用的。
- p:nth-child(1) {
- ...
- }
就介绍到这里,以后会不断更新,如果有好的 CSS 代码,欢迎在留言处提交给我们,一起收录进来!
来源: http://sc.chinaz.com/info/170415437697.htm