- 超出部分显示省略号
// 单行文本
.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为允许在单词内换行*
}
- 自定义滚动条
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);
}
- 修改input输入框中光标的颜色不改变字体的颜色
input{
color: #fff;
caret-color: red;
}
- 修改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;
}
- 解决想固定图片宽高,又担心拉伸变形
.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;//可加可不加
}
- 制造模糊文本
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
- 用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;
}
}
- 简便的为logo隐藏H1
h1 {
text-indent: -9999px;
margin: 0 auto;
width: 320px;
height: 85px;
background: transparent url("images/logo.png") no-repeat scroll;
}
- 修改输入框的提示文字样式
::-webkit-input-placeholder{}//Safari浏览器
::-moz-placeholder{}//火狐浏览器
::-ms-input-placeholder{}//ie浏览器