这些是常用的css代码片段,对我个人而言比较实用,可以省去很多不必要的麻烦
h3 {
span {
}
span:before {
content: “”;
display: inline-block;
width: ;
height: ;
margin: 0 0.5rem;
background: url(../../resource/img/) no-repeat;
background-size: 100% 100%;
vertical-align: middle;
}
span:after {
content: “”;
display: inline-block;
width: ;
height: ;
margin: 0 0.5rem;
background: url(../../resource/img/) no-repeat;
background-size: 100% 100%;
vertical-align: middle;
}
}
标题左右加装饰
:before,:after {
position: relative;
bottom: 0.4rem;
content: ‘’;
display: inline-block;
width: 4rem;
border-top: 1px solid #fff;
}
背景加一条线
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
display: inline-block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
flex布局的兼容性写法
box-shadow: inset 0 0 5px 3px #F86509;
四边内边框
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
单行内容超出宽度隐藏
background: -ms-linear-gradient(top, #ff7d08, #fee6ae);
background: -moz-linear-gradient(top, #ff7d08, #fee6ae);
background: -webkit-linear-gradient(top, #ff7d08, #fee6ae);
background: -o-linear-gradient(top, #ff7d08, #fee6ae);
背景色渐变
background: -ms-linear-gradient(top, #fff, #FFD246);
background: -moz-linear-gradient(top, #fff, #FFD246);
background: -webkit-linear-gradient(top, #fff, #FFD246);
background: -o-linear-gradient(top, #fff, #FFD246);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
文字渐变
Ie8及以下浏览器兼容背景半透明的写法
background: rgba(0, 0, 0, .5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);
其中 样式里的 #88000000 说明:
• 前两位是十六进制透明值,00 是完全透明,FF 是完全不透明。
• 后六位是十六进制颜色值。
transform: rotate(-135deg);
transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform兼容性写法
@media screen and (max-width: 320px) {
}
媒体查询
特殊字体
@font-face {
font-family: ‘’;
font-style: ;
src: url();
}
font-family: Helvetica, Tahoma, Arial, “PingFang SC”, “Hiragino Sans GB”, “Heiti SC”, “Microsoft YaHei”, “WenQuanYi Micro Hei”, sans-serif;