css随笔记

border-top:6px solid #c1ddf7
border-left:6px solid transparent

border-bottom:6px solid #c1ddf7
border-left:6px solid transparent

border-top:6px solid #c1ddf7
border-right:6px solid transparent

border-bottom:6px solid #c1ddf7
border-right:6px solid transparent

img{
    border-radius: 100%;
    -webkit-border-radius: 100%;
}

/*设备最小宽度321px到最大宽度1080px之间且最大密度比为2*/
@media (min-width:321px) and (max-width:1080px) and (-webkit-max-device-    pixel-ratio: 2) {
}

/*设备最小宽度321px到最大宽度1080px之间且最小密度比为2*/
@media (min-width:321px) and (max-width:1080px) and (-webkit-min-device-pixel-ratio: 2) {
}

/*设备最小宽度321px到最大宽度1080px之间且最小密度比为1到最大密度比为2*/
@media (min-width:321px) and (max-width:1080px) and (-webkit-min-device-pixel-ratio: 1) and(-webkit-max-device-pixel-ratio: 2) {
}

/*设备最小宽度321px到最大宽度1080px之间且密度比为2*/
@media (min-width:321px) and (max-width:1080px) and (-webkit-device-pixel-ratio: 2) {
}

.pop{width:100%;background-color:rgba(0,0,0,.6);position:fixed;left:0;top:0;z-index:999;height:100%;display:block;}
.outside{width:100%;height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.inside{width:100%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;}
.inPops{margin:0 auto;background-color:#fff;/*width:68%;可以根据要求改变宽度*/position:relative;text-align:center;border-radius:5px;-webkit-border-radius:5px;}

 <div class="pop">
     <div class="outside">
         <div class="inside">
             <div class="inPops">
                 ...your html code
             </div>
         </div>
     </div>
 </div>

p{
     white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
 }

p{
/*这个是想显示几行就写几*/
-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;
}

p{word-break:break-word;}

 div{  
     box-sizing:border-box;-moz-box-sizing:border-box;/* Firefox */-webkit-box-sizing:border-box;/* Safari */ 
 } 
 /*content-box: 
     这是由 CSS2.1 规定的宽度高度行为。 
     宽度和高度分别应用到元素的内容框。 
     在宽度和高度之外绘制元素的内边距和边框 
 border-box: 
     为元素设定的宽度和高度决定了元素的边框盒。
     就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
     通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。*/

div{
	transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);-moz-transfomr:rotate(90deg);
}

 /*最简单的写法:*/
 background:-webkit-linear-gradient(left,#ffffff,#ffffff);
 /*渐变颜色*/
 -webkit-linear-gradient(left,startColor,endColor);
 /*left位置,startColor起始颜色,endColor结束颜色background-image:-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));*/

 img{
     -moz-box-shadow:2px 2px 5px e69696;/*firefox*/-webkit-box-shadow:2px 2px 5px e69696;/*webkit*/box-shadow:2px 2px 5px e69696;/*opera或ie9*/    
 }
 /*语法box-shadow: h-shadow v-shadow blur spread color inset;*/

 p{
     text-indent:20px;
 }
 /*这是兼容写法与text-indent一样*/
 p:empty{
     padding-left:2%;
 }

 /* 
 box-flex: 
     子容器将父容器的宽度等份分,有几个li就几个等份宽度的li; 
     如果其中一个li设置了固定的宽度而别的li没有设置,则父容器的宽度减去固定li的宽度后在进行等份分; 
 */ 
 ul li{ 
     box-flex:1;-webkit-box-flex:1;-moz-box-flex:1;display:block; 
 } 
 ul{
     display:box;display:-webkit-box;display:-moz-box;
 }