css样式大全

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge”>
bootstrap兼容
<div class="hidden-xs hidden-sm hidden-md">
内阴影
box-shadow:inset 0px 0px 5px 1px #000;
自动换行
word-wrap:break-word

https://www.cnblogs.com/wangyawei/p/9103573.html
Flex-direction调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse

input去除默认样式
input:focus::-webkit-input-placeholder {color: transparent;}
input:disabled {color: transparent;background: none;}
<th rowspan="2"></th>
<th colspan="5"></th>
表格去掉空隙
.table{  border-collapse:collapse; }

双击不选中
-moz-user-select:none;
-webkit-user-select: none;
-ms-user-select: none;

上手所

开关样式收缩
transition: all 0.5s ease-in-out;

上下只有居中
#name{
    position:fixed;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}
万能居中
#name{
      position:fixed;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      z-index:1000;      
}


鼠标移入浮起
.cards .card-wrapper{
position:relative;
margin:0 20px 40px;
border-radius:10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cards .card-wrapper:hover{     
    transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    box-shadow: 0 26px 40px -24px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 26px 40px -24px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 26px 40px -24px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
/*复选框*/
input[type="checkbox"].switch_1{
    font-size: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 64px;
    height: 20px;
    background: #ddd;
    border-radius: 3em;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

input[type="checkbox"].switch_1:checked{
    background: #46d279;
}
input[type="checkbox"].switch_1:after{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
    box-shadow: 0 0 .25em rgba(0,0,0,.3);
    -webkit-transform: scale(.7);
    transform: scale(.7);
    left: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
input[type="checkbox"].switch_1:checked:after{
    left: calc(100% - 20px);
}

选中侧三角形
.typelist.act{
  background: #0080FF;
  position: relative;
}
.typelist.act::after{
  content:'';
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid #0080FF;
  position: absolute;
  right: -10px;
  top: 15px;
}



z-index层级配合定位使用position
  for (let i = 0; i < list.length; i++) {
            all = true
            if (!list[i].state) {
                all = false   
            }
            
        }
阴影
  box-shadow: 0px 2px 20rpx 0px rgba(170, 170, 170, 0.46);
<!-- 弹性盒子居中 -->
 display: flex;
  justify-content: center;


<!-- 两行打点 -->

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;


<!-- 一行打点-->

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
***
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;

<!-- 文字俩段对齐-->

text-align:justify;

<!-- 高度自适应-->

height: calc(100vh - 10rem);
width: calc(100vw - 10rem);

<!-- 浮层整体-->

width: 100%;
height: 100%;
top:0;
left: 0;
z-index: 100;
display: none;

<!-- 浮层背景-->

    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.8);


<!-- 浮层内容-->

position: fixed;
width: 80%;
top: 32%;
left: 0;
border-radius: 0.5rem;
background: #fff;
z-index: 999999999;
margin:  0rem 10% 0rem;

<!-- placeholder颜色 -->
<!-- input::-webkit-input-placeholder{
           color:#fff;
       }
       input::-moz-placeholder{   /* Mozilla Firefox 19+ */
           color:#fff;
       }
       input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
           color:#fff;
       }
       input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
           color:#fff;
       } -->