一、 修改浏览器的滚动条 （chrome）
1.1 主要有下面7个属性
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义拖动块的样式
实例：
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 16px;
height: 16px;
background-color: #7af5cf;/*//背景色*/
}
/*定义滚动条轨道 内阴影+圆角*//* 滚动槽 */
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #4e3cf5;/*滚动条槽的颜色*/
}
/*定义滑块 内阴影+圆角*//* 滚动条滑块 */
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/*交互时样式设置*/
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(157, 178, 255, 0.82);
width: 10px;
height: 10px;
border: 6px;
}
/* 两边按钮设置*/
::-webkit-scrollbar-button {
width: 10px;
height: 10px;
border: 2px;
background: #d3b71d;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条递减属性的按钮上的状态，在该文件中就只有水平方向的第一个按钮*/
/* decrement 表示递减的碎片 */
width: 10px;
height: 10px;
border: 6px;
background: #d3150b;
}
/*内层轨道，滚动条中间部分（除去）,滚动槽颜色可能会遮挡该颜色*/
::-webkit-scrollbar-track-piece {
/*background: #29d32f;*/
}
/*两个滚动条的交汇处*/
::-webkit-scrollbar-corner {
width: 10px;
height: 10px;
border: 2px;
background: #bdd39b;
}
::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
width: 10px;
height: 10px;
border: 2px;
background: #d1a2d3;
}
常用实例：
.scrollbar() {
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: rgba(0, 0, 0, 0.4);
}
}
}
二、单行多行文本省略
//单行文本省略
.ellipsis() {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
//多行文本省略
.ellipsis-multi-line(@line) {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: @line;
/*! autoprefixer: off */ //不加这行注释 有时候会不生效；
-webkit-box-orient: vertical;
}
三、禁止复制、选中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
四、select 下拉选择设置右对齐
select option {
direction: rtl;
}
五、通过transform进行skew变形，rotate旋转会造成出现锯齿现象
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)
六、虚线效果
.dotted-line{
border: 1px dashed transparent;
background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em);
}
css自带的border-style属性 dotted/ dashed . 效果展示出来太密了，并不符合UI设计
具体的虚线的颜色和间距都可以通过repeating-linear-gradient生成的条纹背景去调整。
七、设置输入框input中placeholder的字体颜色、字号
1、须知
placeholder属性时css3中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占用文本。
2、设置placeholder文字颜色、字号
方式1、 因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定（可以在冒号前面写input和textarea）。
::-webkit-input-placeholder{/*Webkit browsers*/
color:#999;
font-size:16px;
}
:-moz-placeholder{/*Mozilla Firefox 4 to 8*/
color:#999;
font-size:16px;
}
::moz-placeholder{/*Mozilla Firefox 19+*/
color:#999;
font-size:16px;
}
:-ms-input-placeholder{/*Internet Explorer 10+*/
color:#999;
font-size:16px;
}
方式2、建议使用该方式，如果是在手机客户端webview只使用-webkit内核方式即可。
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
color:#666;
font-size:16px;
}
input:-moz-placeholder,textarea:-moz-placeholder{
color:#666;
font-size:16px;
}
input::-moz-placeholder,textarea::-moz-placeholder{
color:#666;
font-size:16px;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{
color:#666;
font-size:16px;
}
八、设置输入框input中textArea的拖拽
// css
overflow: hidden;
resize: none;
九、隐藏 Input[type=Number]的上下按键
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type='number'] {
-moz-appearance: textfield;
}
十、清除antd input 默认样式
.clearAntInput(@placeHolder: #ff0, @fontSize: 16px ){
border: none;
border-radius: 0;
background-color: rgba(255, 255, 255, 0) !important;
background: transparent;
font-size: @fontSize;
padding: 0;
padding-right: 30px;
// 清除浏览器默认自动填入的样式
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-transition-delay: 99999s;
-webkit-transition: color 99999s ease-out,
background-color 99999s ease-out;
}
// 修改placeholder 的样式
&::-webkit-input-placeholder {
/*Webkit browsers*/
color: @placeHolder;
}
&:focus {
box-shadow: none;
}
&.error {
box-shadow: none;
}
}
十一、text-align-last 兼容iOS
div{
text-align: justify;
-moz-text-align-last: center;
text-align-last: justify;
&::after，&::before {
content: '';
display: inline-block;
width: 100%;
height: 0;
}
}
常用的css 形状
