南宁网站建设方案详细方案/深圳百度推广联系方式

转载自：juejin.im/post/5ac837…

平时在工作中遇到一些比较偏门的 css ，用过一两次，但是老是记不住，于是又需要去 baidu、 google ，所以都积累起来，方便以后查看（持续更新...） ?

详情，可查阅我的博客 lishaoy.net

outline当input选中的时候会出现一个边框

/*一般设置成 none*/textarea:focus, input:focus{outline: none;
}
复制代码

contenteditable规定元素内容是否可编辑

<divid="example-one"contenteditable="true">#example-one { margin-bottom: 10px; 
}
[contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; 
}
[contenteditable="true"]:hover { outline: 2px dashed #0090D2; 
}
复制代码

webkit-playsinlinevideo 都可以在页面中播放，而不是全屏播放

<videoid="myvideo"src="test.mp4"webkit-playsinline="true"></video>
复制代码

clearfix清除浮动

.clearfix {zoom: 1;
}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
复制代码

user-select禁止选中文本

p {-webkit-user-select: none; /* Chrome, Opera, Safari */-moz-user-select: none; /* Firefox 2+ */-ms-user-select: none; /* IE 10+ */user-select: none; /* Standard syntax */
}
复制代码

webkit-scrollbar自定义浏览器滚动条

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/div::-webkit-scrollbar {width: 5px;height: 5px;background-color: rgba(245, 245, 245, 0.47);
}/*定义滚动条的轨道，内阴影及圆角*/div::-webkit-scrollbar-track {-webkit-box-shadow: inset 006pxrgba(0, 0, 0, .3);border-radius: 10px;background-color: #f5f5f5;
}/*定义滑块，内阴影及圆角*/div::-webkit-scrollbar-thumb {/*width: 10px;*/height: 20px;border-radius: 10px;-webkit-box-shadow: inset 006pxrgba(0, 0, 0, .3);background-color: rgba(85, 85, 85, 0.25);
}
复制代码

webkit-appearance去除默认样式

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

使用CSS transforms 或者 animations时可能会有页面闪烁的bug

elements {-webkit-backface-visibility: hidden; 
}
复制代码

transform-style: preserve-3d让元素支持3D

elements {-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */transform: rotateY(60deg);transform-style: preserve-3d;
}
复制代码

perspective这个属性定义子元素会获得透视效果，而不是元素本身

<divclass="cube pers250"><divclass="face front">1</div><divclass="face back">2</div><divclass="face right">3</div><divclass="face left">4</div><divclass="face top">5</div><divclass="face bottom">6</div></div>.cube {width: 100%;height: 100%;backface-visibility: visible;perspective-origin: 150%150%;transform-style: preserve-3d;-webkit-backface-visibility: visible;-webkit-perspective-origin: 150%150%;-webkit-transform-style: preserve-3d;
}
.pers250 {perspective: 250px;-webkit-perspective: 250px;
}
.face {display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: sans-serif;font-size: 60px;color: white;text-align: center;
}
复制代码

css实现不换行、自动换行、强制换行

/*不换行*/white-space:nowrap;/*自动换行*/word-wrap: break-word; 
word-break: normal; /*强制换行*/word-break:break-all;
复制代码

font-smoothing设置字体平滑，会让字体看起来比较舒服

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, a, .td-name, td {-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;font-family: "Microsoft YaHei", "微软雅黑", 'Muli', "Helvetica", Arial, sans-serif;
}
复制代码

::selection修改选中文本颜色

::selection {color: white;background-color: rgba(0, 0, 0, 0.8);
}
::-webkit-selection {color: white;background-color: rgba(0, 0, 0, 0.8);
}
::-moz-selection {color: white;background-color: rgba(0, 0, 0, 0.8);
}
复制代码