css帰納

1323 ワード

文書ディレクトリ

  • 1、1行または2行で表示されます.
  • 2、inputプレースホルダのスタイル変更
  • 3、背景色がない設定
  • 4、div->ul->li横スクロール:
  • 5、background略記
  • 6、flex互換ブラウザ書き方
  • 1、1行または2行で表示されます.
    {
    	overflow : hidden;
    	text-overflow: ellipsis;//               
    	display: -webkit-box;
    	-webkit-line-clamp:2;//   2     
    	-webkit-box-orient: vertical;
    }
    

    2、inputプレースホルダのスタイル変更
    input::-webkit-input-placeholder{
    	color: #C1C1C1;
    }
    

    3、背景に背景色がない設定
    background-color:transparent
    

    4、div->ul->liは横スクロールを実現する:
    div{
    	width:20px;//    
    }
    ul{
    	white-space:nowrap;//       
    	overflow: hidden;
    	overflow-x: auto;
    }
    li{
    	white-space:nowrap;//       
    }
    

    5、background簡写
    background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip]
    

    background-sizeはbackground-positionの値の後に付いています(古いバージョンのブラウザでは略語がサポートされていないものもあります).たとえば、次のようにします.
    background: url() no-repeat right top / 100% 100%;
    

    6、flex互換ブラウザの書き方
    .box {
        display:-webkit-flex;
        display:flex;
        display:-webkit-box;
        display:-moz-box;
        display:-ms-flexbox;
    }