常用易忘的CSS技巧

1. 超出部分显示省略号

 // 单行文本
.wrap {
	overflow:hidden;/*超出部分隐藏*/
	text-overflow:ellipsis;/*超出部分显示省略号*/
	white-space:nowrap;/*规定段落中的文本不进行换行 */
}
// 多行文本
.wrap {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;   //将对象作为弹性伸缩盒子模型显示  *必须结合的属性*
    -webkit-box-orient: vertical;   //设置伸缩盒对象的子元素的排列方式  *必须结合的属性*
    -webkit-line-clamp: 3;   //用来限制在一个块元素中显示的文本的行数
    word-break: break-all;   //让浏览器实现在任意位置的换行 *break-all为允许在单词内换行*
}

2. 自定义滚动条

overflow-y: scroll;
//整个滚动条
::-webkit-scrollbar
  {
    width: 4px;
    height: 10px;
  }
  /*滑动轨道*/
  ::-webkit-scrollbar-track
  {
    border-radius: 0px;
    background: none;
  }
  /*滑块*/
  ::-webkit-scrollbar-thumb
  {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(248,251,255,.2);
    background-color: #2B8099
  }
  /*滑块效果*/
  ::-webkit-scrollbar-thumb:hover
  {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(248,251,255,.2);
    background-color: rgba(248,251,255, 0.8);
  }

3. 修改input输入框中光标的颜色不改变字体的颜色

input{
    color:  #fff;
    caret-color: red;
}

4. 修改input 输入框中 placeholder 默认字体样式

//webkit内核的浏览器 
input::-webkit-input-placeholder {
    color: #c2c6ce;
}
//Firefox版本4-18 
input:-moz-placeholder {
    color: #c2c6ce;
}
//Firefox版本19+
input::-moz-placeholder {
    color: #c2c6ce;
}
//IE浏览器
input:-ms-input-placeholder {
    color: #c2c6ce;
}

5.清除img出现的三像素空白

//方法一
img {
	display:block;
}
//方法二
img {
	vertical-align:top;
}
//方法三
img {
	font-size:0;line-height:0;
}

6. 解决想固定图片宽高，又担心拉伸变形

.imgBox{
	display:flex;
	justify-content: center;
	align-items: center;
	width:100px;
	heigth:100px;
}
.imgBox img{
	max-width:100%;
	max-height: 100%;
	width:auto;//可加可不加
	height:auto;//可加可不加
}

7. 制造模糊文本

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

8. 用CSS动画实现省略号动画

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii码的省略号字符 */
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

9. 简便的为logo隐藏H1

h1 {
    text-indent: -9999px;
    margin: 0 auto;
    width: 320px;
    height: 85px;
    background: transparent url("images/logo.png") no-repeat scroll;
}

10. 修改输入框的提示文字样式

::-webkit-input-placeholder{}//Safari浏览器
::-moz-placeholder{}//火狐浏览器
::-ms-input-placeholder{}//ie浏览器