常用CSS样式整理

CSS文件中引用CSS文件

@import url("base.css");

角标实现

div{
 vertical-align：super
}

小三角实现

.triangle{
  display:block;
  width:0;
  height:0;
  border-width:0 8px 8px;
  border-style:solid;
  border-color:transparent transparent #428bca;/*蓝*/
  position:absolute;
  top:0px;
  left:0px;
}

单行文字限制

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

多行文字限制

div{
 overflow : hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
}

清除浮云

.clearfix{
 display: table;
 content: " ";
 box-sizing: border-box;
 clear: both;
}

元素旋转

div{
 -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
 -moz-transform:rotate(90deg); /* Firefox */
 -ms-transform:rotate(90deg);   /* IE 9 */
 -o-transform:rotate(90deg);    /* Opera */
 transform:rotate(90deg);
}

元素缩放

div{
 -webkit-transform: translate(-50%,-50%);
 -moz-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 -o-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
}

渐变

div{
 width: 100px;
 height: 200px;
 background: -webkit-linear-gradient(top,#ccc,#000);/*Webkit*/
 background: -moz-linear-gradient( top,#ccc,#000);/*火狐*/
 background: -o-linear-gradient(top,#ccc, #000); /*Opera*/
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
}

外阴影

div{
 -webkit-box-shadow:2px 2px 5px #999999;
 -moz-box-shadow:2px 2px 5px #999999;
 box-shadow:2px 2px 5px #999999;
}

鼠标事件禁用

div{
  pointer-events:none
}

去掉 input 获取焦点时的框架

input:focus{
    outline: none;
}