1、小三角
.triangle{border:solid 10px transparent;width:0}
.triangle.bottom{border-top-color:green}
.triangle.top{border-bottom-color:green}
.triangle.left{border-right-color:green}
.triangle.right{border-left-color:green}
效果图
2、文章首字下沉或者空2个文字的距离
p:first-letter{ float:left; color:green; font-size:30px;
}
p:first-letter{ text-indent:20px
}
3、修改input placeholder样式
input::-webkit-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px;
}
input::-moz-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px;
}
input::-ms-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px;
}
4、右上角贴纸效果
<div class="wrap"> <div class="ribbon"> <a href="#">Fork me on GitHub</a> </div>
</div>
.wrap{ width: 160px; height:160px; overflow:hidden; position: relative; background-color: #f3f3f3;
}
.ribbon{ background-color: #a00; overflow: hidden; white-space: nowrap; position: absolute; /* shadom */ -webkit-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; /* rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* position */ left: -50px; top: 40px;
}
.ribbon a{ border: 1px solid #faa; color: #fff; display: block; font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 1px 0; padding: 10px 50px; text-align: center; text-decoration: none; /* shadow */ text-shadow: 0 0 5px #444;
}
5、自定义网页文本选中格式
// 注意只能修改这两个属性 字体颜色 选中背景颜色
element::selection{ color: green; background-color: pink;
}
element::-moz-selection{ color: green; background-color: pink;
}
6、简单的load效果
.loading:after { display: inline-block; overflow: hidden; vertical-align: bottom; content: '\2026'; -webkit-animation: ellipsis 2s infinite;
}
@-webkit-keyframes ellipsis { from { width: 2px; } to { width: 15px; }
}
@-webkit-keyframes dancing-dots-jump { 0% { top: 0; } 55% { top: 0; } 60% { top: -10px; } 80% { top: 3px; } 90% { top: -2px; } 95% { top: 1px; } 100% { top: 0; }
}
span.jumping-dots > span { -webkit-animation: dancing-dots-jump 1800ms infinite; padding: 1px; position: relative;
}
span.jumping-dots > span:nth-child(2) { -webkit-animation-delay: 100ms;
}
span.jumping-dots > span:nth-child(3) { -webkit-animation-delay: 300ms;
}
7、文字模糊效果
{color: transparent;
text-shadow:0 0 2px rgba(0,0,0,.5);}
1、这里输入标题
8、文本溢出显示省略号
/* 宽度固定,适合单行显示... */
{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 宽度不固定,适合多行以及移动端显示 */
{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
9、清除浮动
.clearfix{ zoom: 1;
}
.clearfix:after{ display: block; content: ''; clear: both
}
10、垂直水平居中
/* 绝对定位方式且已知宽高 */
{ position: absolute; top: 50%; left: 50%; margin-top: -3em; margin-left: -7em; width: 14em; height: 6em;
}
/* 绝对定位 + 未知宽高 + translate */
{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);/* 需要补充浏览器前缀 */
}
/* flex 轻松搞定水平垂直居中( 未知宽高)} */
{ display: flex; align-items: center; justify-content: center;
}