css奇技淫巧

在项目中总会遇到许多css问题,因此,总结几个常遇到的问题

  • placeholder移动:text-indent:3
  • 去除input框:outline-style:none
  • background渐变色 :background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
  • 旋转180度带过渡:-webkit-transform: rotate(180deg);transition: All 0.4s ease-in-out;
  • 关于垂直居中vertical-align可以设置像素值
  • 在组件化的样式中,在类似于‘曰’这种布局的时候,如何动态的把线加载父元素上?
  • 30 Seconds of CSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    .parent{
    dispaly:flex;
    flex-direction:row;
    justify-content:space-around;
    box-sizing:border-box;
    &:after{
    content:'';
    display:block;
    width:100%;
    height:0;
    box-sizing:border-box;
    border-bottom:1px solid #ddd;
    position:relative;
    top:-208px;
    }
    }


    /* css禁用鼠标事件 */
    .disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
    }
    /* css禁止用户选择 */
    body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    /* 修改chrome记住密码后自动填充表单的黄色背景 */
    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
    }
    /* 页面里的字体变清晰,变细,overflow:scroll平滑滚动 */
    body{
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;

    }
    /* 开启硬件加速 */
    /* 目前,像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速,当检测到某个DOM元素应用了某些CSS规则时就会自动开启,从而解决页面闪白,保证动画流畅。 */
    .css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }
    /* 移动端html标签几个体验优化 */
    html,body{

    overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题,如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/

    -webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况,所以需要写上*/

    position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话,会出现留白*/
    }
    /* 手机上的多行省略 */
    .overflow-hidden{
    display: box !important;
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;/*第几行出现省略号*/
    /*text-align:justify;不能和溢出隐藏的代码一起写,会有bug*/
    }
    /* 长时间按住页面闪退 */
    .element {
    -webkit-touch-callout: none;
    }
    /* 改变输入框内提示文字颜色 */
    ::-webkit-input-placeholder { /* WebKit browsers */
    color: #999; }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #999; }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999; }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999; }
    input:focus::-webkit-input-placeholder{ color:#999; }
    /* 消除transtration闪屏 */
    .css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    }