网站首页 » 前端开发 » div+css » 前端开发中常用的 CSS 样式整理(经历之谈)
上一篇:
下一篇:

前端开发中常用的 CSS 样式整理(经历之谈)

这是一些经验之谈,虽然本博客里的文章几乎都可以称得上是经验之谈,但本文章更接地气,更实用,你可以把它当做一个字典来用,因为下面所收集的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{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

多行文字限制

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

text-overflow:ellipsis 文字超出省略号代替不起作用解决方法

清除浮云

.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
}

去掉 textarea 右下角图标

textarea{
   resize: none;
}

去掉 input 获取焦点时的框架

input:focus{
    outline: none;
}

隐藏滚动条

::-webkit-scrollbar{
    display:none;
}

input placeholder 样式修改

::-webkit-input-placeholder {
    color: red;
}
:-moz-placeholder {
    color: red;
}
::-moz-placeholder{
    color: red;
}
:-ms-input-placeholder {
    color: red;
}

placeholder 样式修改

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color: red; 
} 

解决数字、字母不换行

div{
    word-wrap:break-word
}

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/fewd-collection-of-frequently-used-css/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END