CSS | 常见的清除默认样式和常用属性

清除input的默认样式：

input {
	background： none;
	outline: none;
	border: none;
}

改变input中的placeholder的默认样式：

input::-webkit-input-placeholder {
	color: rgba(49,49,49,1);
	font-size: .26rem;
}

清除button的默认样式：

button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;   //自定义边框
  outline: none;   //消除默认点击蓝色边框效果
}

背景色的渐变色：

background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(248, 87, 87,0.75)), to(rgb(253, 138, 117,0.75)));

伪类元素实现倒立小三角的效果：

.wrapper-time .year {
    background: #808080;
    padding: 0 .4rem 0 0;
    position: relative;
}
.wrapper-time .year:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: .10rem solid transparent;
    border-right: .10rem solid transparent;
    border-top: .12rem solid #313131;
    top: .26rem;
    right: .02rem;
}

拓展：不同方向的小三角实现效果

.tri-up{
    width: 0;
    height:0;
    border-left:20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid red;  
}
.tri-left{
    width: 0;
    height:0;
    border-top:20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid red;
}
.tri-right{
    width: 0;
    height:0;
    border-top:20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid red;
}
.tri-down{
    width: 0;
    height:0;
    border-left:20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid red; 
}

伪类元素如何实现添加背景图：

.already-select-nav .l-n-list .item.active:after {
    content: " ";
    display: block;
    width: .51rem;
    height: .52rem;
    background: url(../../images/selectCourse/delete.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: -.18rem;
    top: -.16rem;
}

文字超出两行隐藏并...表示：

.overstep {
    display: -webkit-box;
    text-overflow: ellipsis;    //溢出用省略号显示
    overflow: hidden;    //超出的文本隐藏
    white-space: nowrap; //溢出不换行
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;//当属性值为3，表示超出3行隐藏
}
 
//若显示两行，长度超出隐藏
.overstep {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;    //作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical;    //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp: 2;     //显示的行
    word-break: break-all;    //只对英文起作用，以字母作为换行依据
    word-wrap: break-word;     //只对英文起作用，以单词作为换行依据
}