记录一些平时开发所遇到的css tricks

比较杂，想到哪儿就纪录下来，未完待续。。

  • 改变webkit表单输入框placeholder的颜色值

    1
    input:: -webkit-input-placeholder { color: #aaa; }

  • 防止表格/层撑破又防止单词断裂

    1
    table { table-layout: fixed; word-wrap: break-word; }

  • 文本溢出

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* 多行文本溢出, 适合于webkit内核的浏览器 */
    .app-footer .item > p {
      max-height: 4rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;  /* 最多显示2行 */
      -webkit-box-orient: vertical;	 	/* 不过这种方式有缺憾，只能适用于webkit内核的浏览器如chrome */
    }
    /* 单行*/
    .app-footer .item > h3 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

  • 背景色渐变

    1
    2
    3
    4
    5
    /* 各个浏览器写法不同 */
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法 */

  • 360度旋转

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #change { 
      position: absolute; 
      right: 200px; 
      -webkit-animation: change 2s linear infinite;
      animation: change 2s linear infinite;
    }
    @-webkit-keyframes change
    {
      0% { -webkit-transform:rotate(0deg); }
      50% { -webkit-transform:rotate(180deg); }
      100% { -webkit-transform:rotate(360deg); }
    }

  • 垂直居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 这是针对子元素 */
    .child {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    /* 这是针对父元素 */
    .parent {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    /* 其实还有很多种方法，等有空专门出个居中系列的文章吧 */

  • 水平垂直居中 

    1
    2
    3
    4
    5
    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }

  • 手机横屏竖屏样式切换

    1
    2
    3
    4
    5
    6
    7
    8
    /* 竖屏时使用的样式*/
    @media all and (orientation: portrait) {
      .css{}
    }
    /* 横屏时使用的样式*/
    @media all and (orientation: landscape) {
      .css{}
    }

  • a链接hover, 下划线滑动效果

    1
    2
    3
    4
    5
    6
    7
    8
    a:hover {
      display: block; 
      content: "";
      height: 2px;
      width: 0%;   
      background-color: #fff; 
      transition: width 0.3s ease-in-out;
    }

  • 清除浮动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .clearfix:before, .clearfix:after {
    	content: " ";
    	display: table;
    }
    .clearfix:after {
    	clear: both;
    }
    /* ie6 
    .clearfix {
    	*zoom: 1;
    }
    **/