总结一些项目中遇到的css样式,供以后查阅,持续更新。
1.控制文本以指定行数显示,多余部分以省略号代替。
.singleline{
display: -webkit-box; /*必须结合的属性 ,将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient; /*必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式*/
text-overflow: ellipsis; /*可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本*/
overflow : hidden;
-webkit-line-clamp: 1; /*控制行数
-webkit-box-orient: vertical;
}
2.在图标右上角显示数量提醒,类似微信未读消息。
.redpoint{
height: 15px;width: 15px;
border-radius: 50%;
display: inline-block;
text-align: center;
font-size: 0.1em;
color: #FFFFD0; /*调整数字的大小*/
background: red;
position: relative;
top: -38px; /*通过控制与上右的距离实现在右上角*/
right: -10px;
}
3.圆角卡片(以主背景为白色,圆角卡片为灰色为例)
.card-back{
background-color:#f0f0f0;
border-radius:10px; /*控制圆角的弧度*/
}
4.所有元素共用样式(以*作为标识)
*{
font-family:Arial; /*所有元素共用该字体样式*/
}
5.使元素特立独行,不使用所有元素的共用样式(例如大家都是红色的,只有我是蓝色的)
*{
color:red;
}
.mycss{
colorable !important; /*!important的优先级最高*/
}