版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/smalCat/article/details/83477453
经过一段时间的前端工作,我发现,有些时候会有大量的重复css效果项目中出现,这里就特别为自己准备了一个css常用样式记录,以此来避免自己重复的去写一些css效果样式
文本省略…
p {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; <**文本不换行**>
}
文本换行
p {
word-break:normal;
white-space:pre-warp;
word-wrapL:break-word;
}
文本多行省略…
默认编译的时候,会过滤 -webkit-box-orient: vertical;
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 这里设置行数
/* autoprefixer: off */ // 关闭编译
-webkit-box-orient: vertical; // 跳过编译
/* autoprefixer: on */ // 开启编译
}
border三角形
&:after {
display: block;
content: '';
width: 0;
height:0;
position: absolute;
left: 26px;
top: -20px;
border:10px solid #f00283;
border-color: transparent transparent #fff transparent;
}
&:before {
display: block;
content: '';
width: 0;
height:0;
position: absolute;
left: 24px;
top: -24px;
border:12px solid #f00283;
border-color: transparent transparent #e0e0e0 transparent;
}
border 下滑线展开
&:before {
display: block;
width: 0;
height: 0;
content: '';
transition: all .5s;
border-bottom: 4px solid #333740;
position: absolute;
bottom: -4px;
left: 50%;
right: 52%;
}
&:hover {
transform: translateY(-10px);
box-shadow: 10px -10px 7px 0px rgba(0, 0, 0, 0.3);
&:before {
left: 0;
width: 100%;
border-bottom: 4px solid #ffc527;
}
}
form表单的placehold样式
::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */
:-moz-placeholder{} /* Firefox版本4-18 */
::-moz-placeholder{} /* Firefox版本19+ */
:-ms-input-placeholder{} /* IE浏览器 */