Skip to content

Instantly share code, notes, and snippets.

@yisibl

yisibl/prefix.css

Last active August 29, 2015 13:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yisibl/9128766 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yisibl/9128766 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yisibl revised this gist Feb 21, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion prefix.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@
    常用属性测试
    ========================================================================== */

    .aa{
    .display {
    display: inline-block;
    }

  2. yisibl renamed this gist Feb 21, 2014. 1 changed file with 0 additions and 0 deletions.
    0 prefixer.css → prefix.css
    View file
    File renamed without changes.
  3. yisibl created this gist Feb 21, 2014.
    122 changes: 122 additions & 0 deletions prefixer.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,122 @@
    /**
    * Autoprefixer 测试用例
    * @author: 一丝
    * @update: 2014-2-21 11:26:44;
    */

    /* ==========================================================================
    常用属性测试
    ========================================================================== */

    .aa{
    display: inline-block;
    }

    /* background */
    .bg {
    box-shadow:1px 0 0 #ccc;
    border-radius: 8px;
    background-size: 10px 20%;
    background-origin: border-box;
    background-clip: border-box;

    }

    .image {
    object-fit: cover;
    object-position: 50% 30px;
    }

    .ui {
    box-sizing: border-box;
    text-overflow: ellipsis;
    }

    /* transition */

    .transition {
    transition: 1s 2s width linear;
    }

    /* animation */
    .animation {
    animation: foo 1s 2s infinite linear alternate both;
    }

    @keyframes foo {
    0% {
    background-color: red;
    }
    to {
    background-color: blue;
    }
    }

    /* transform */
    .transform {
    transform: translate3d(50px, -24px, 5px) rotate3d(1, 2, 3, 180deg) scale3d(-1, 0, .5);
    }

    .text {
    hyphens: auto;
    text-align-last: justify;
    text-justify: inter-word;
    }


    /* ==========================================================================
    flex 测试
    ========================================================================== */
    /**
    * IE Doc: http://msdn.microsoft.com/zh-cn/library/ie/hh673531(v=vs.85).aspx
    */

    .flex {
    display: flex;
    display: inline-flex;
    }

    .flex {
    align-content: flex-start;
    align-content: space-between;
    }

    .flex {
    justify-content: flex-end;
    justify-content: space-around;
    }

    .flex {
    align-items: flex-start;
    }

    .flex {
    align-self: flex-end;
    }


    .flex{
    flex-flow:row nowrap;
    }

    .flex {
    flex-wrap: wrap-reverse;
    }

    .flex{
    flex-direction: column-reverse;
    }

    .flex {
    order: 5;
    }

    .flex {
    flex-basis: 10px;
    flex-grow: 5;
    flex-shrink: 9;
    }

    .flex {
    flex: 5 9 10%;
    }