小聂子客栈

常用css（持续更新07.19）

2018-04-08 热度 ℃

常用样式集合

斑马纹表格

1
<table class="sl-table-inside is-zebras"></table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.sl-table-inside * {
  box-sizing: border-box;
}

.sl-table-inside {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-spacing: 0;
  background-color: #fff;
  border: 1px solid #dfe6ec;
  border-right: 0;
  border-bottom: 0;
  font-size: 14px;
  color: #1f2d3d;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.sl-table-inside tr {
  background-color: #fff;
}

.sl-table-inside th {
  background-color: #eef1f6;
  font-weight: normal;
}

.sl-table-inside th,
.sl-table-inside td {
  padding: 0 8px;
  box-sizing: border-box;
  position: relative;
  height: 40px;
  text-overflow: ellipsis;
  vertical-align: middle;
  border-right: 1px solid #dfe6ec;
  border-bottom: 1px solid #dfe6ec;
  transition: all .25s ease;
  overflow: hidden;
}

.sl-table-inside.is-zebras tr:nth-child(even)>td {
  background-color: #FAFAFA;
  /*background-color:#eef1f6;*/
}

.sl-table-inside tr:hover>td,
.sl-table-inside.is-zebras tr:hover>td {
  background-color: #eef1f6;
}

按钮效果

  1. hover亮片

    1
    <button class="flash-btn">click me</button>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .flash-btn:before{
        content:'';
        background:rgba(255,255,255,.5);
        position:absolute;
        height:100%;
        width:2em;
        left:-4em;
        top:0;
        transform:skewX(-45deg) translateX(0);
    }
    .flash-btn:hover:before{
        transition:all .7s ease-in-out;
        transform:skewX(-45deg) translateX(10em);
    }

  2. click水纹

    1
    <button class="ripple-btn">click me</button>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .ripple-btn{
        overflow: hidden;
        user-select: none;
    }
    .ripple{
        position: absolute;
        background-color: rgba(0, 0, 0, .15);
        border-radius: 100%;
        transform: scale(0);
        pointer-events: none;
    }
    .ripple.show{
        animation-name: ripple;
        animation-duration: .75s;
        animation-timing-function: ease-out;
    }
    @keyframes ripple{
        to{
            transform: scale(2);
            opacity: 0;
        }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    var addRippleEffect = function(e) {
        var target = e.target;
        if(target.tagName.toLowerCase() !== "button") return false;
        var rect = target.getBoundingClientRect();
        var ripple = target.querySelector(".ripple");
        if(!ripple){//水纹是否已存在
            ripple = document.createElement("span");
            ripple.className = 'ripple';
            ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
            target.appendChild(ripple)
        }
        ripple.classList.remove("show");
        var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
        var left = e.pageX - rect.left - ripple.offsetWidth /2 - document.body.scrollLeft;
        ripple.style.top = top + 'px';
        ripple.style.left = left + 'px';
        ripple.classList.add("show")
        return false
    }
    //点击时给按钮添加水纹效果
    document.addEventListener("click", addRippleEffect, false);

详细：jsfiddle地址

背景颜色渐变

1
<div class="linear-color">linear color change</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.linear-color{
    width: 300px;
    height: 200px;
    color: #fff;
}
	/* 渐变效果 type1 */
.linear-color{
    background: olive linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,.5));
    transition: all .5s;
}
.linear-color:hover{
    background-color: purple;
}
	/* 渐变效果 type2 */
.linear-color{
    background: linear-gradient(to right, olive, green);
    position: relative;
    z-index: 0;
}
.linear-color::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, green, purple);
    opacity: 0;
    transition: all .5s;
    z-index: -1;
}
.linear-color:hover::before{
    opacity: 1;
}
	/* 渐变效果 type3 */
.linear-color{
    background: linear-gradient(to right, olive, green, purple);
    background-size: 200%;
    transition: all .5s;
}
.linear-color:hover{
    background-position: 100%;
}

详细：jsfiddle地址

随光标移动的下划线

1
2
3
4
5
6
7
<ul class="moving-line">
    <li>tab 1</li>
    <li>tab 2</li>
    <li>tab 3</li>
    <li>tab 4</li>
    <li>tab 5</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.moving-line{
    display: table;
    width: 80%;
    margin: 0 auto;
}
.moving-line li{
    list-style: none;
    display: inline-block;
    width: 20%;
    float: none;
    position: relative;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    transition: all .2s linear;
}
.moving-line li::before{
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: all .2s linear;
}
.moving-line li:hover::before{
    left: 0;
    width: 100%;
    transition-delay: .2s;
}
.moving-line li:hover ~ li::before{
    left: 0;
}

详细：jsfiddle地址

表格内容垂直居中

1
2
3
4
<div class="sl-table">
	<div class="sl-table-cell cell-half">我是内容</div>
	<div class="sl-table-cell cell-33">我是特别特别多的内容啊啊啊啊啊啊啊啊啊啊</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.sl-table{
	display: table;
	width: 100%;
}
.sl-table-cell{
	display: table-cell;
	float: none;
	vertical-align: middle;
}
.sl-table-cell.cell-half{
	width: 50%;
}
.sl-table-cell.cell-33{
	width: 33%;
}

详细：jsfiddle地址

单个内容垂直居中

1
2
3
4
5
6
.vertical-middle{
	position:relative;
	top:50%;
	-webkit-transform:translate(0,-50%);
	transform:translate(0,-50%);
}

表单左右两边拓展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 带icon输入类型 -->
<div class="form-item is-tips">
	<div class="form-item-prepend"><span>手机号</span></div>
	<input type="number" placeholder="请输入手机号">
	<div class="form-item-prepend"><span>icon</span></div>
	<div class="form-item-tips">我是报错提示</div>
</div>
<!-- 手机验证码类型 -->
<div class="form-item">
	<div class="form-item-prepend"><span>验证码</span></div>
	<input type="number" placeholder="请输入短信验证码">
	<div class="form-item-append">
		<a id="GetCode" class="form-item-code sl-btn">获取验证码</a>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.form-item{
	width:100%;
	position:relative;
	display:table;
	padding:5px 0;
	border-bottom:1px solid #e6e6e6;
}
.form-item input,
.form-item select{
	display:table-cell;
	vertical-align:middle;
	width:100%;
	line-height:inherit;
	height:40px;
	padding-right:8px;
	border:none;
	outline:none;
	-webkit-appearance:none;
	background-color:transparent;
	padding:10px 0;
}
.form-item .form-item-prepend,
.form-item .form-item-append{
	display:table-cell;
	vertical-align:middle;
	white-space:nowrap;
}
.form-item .form-item-prepend{
	padding:0 5px 0 10px;
	width:85px;
}
.form-item .form-item-code{
	width:120px;
	font-size:1em;
	text-align:center;
	background:none;
	background-color:#fff;
	color:#f85032;
}
.form-item .form-item-code.active{
	color:#bbbbbb;
}
.form-item.is-tips{
	padding-bottom:25px;
}
.form-item .form-item-tips{
	font-size:0.9em;
	position:absolute;
	left:0;
	right:0;
	bottom:5px;
	padding-left:10px;
	color:red;
}
.sl-btn{
	display:inline-block;
	width:100%;
	text-decoration:none;
	color:#fff;
	font-size:1.2em;
	background:#f85032;
	padding:10px 0;
	text-align:center;
	cursor: pointer;
	background:-webkit-linear-gradient(left, #f85032 0%, #e73827 100%);
	background:   -moz-linear-gradient(left, #f85032 0%, #e73827 100%);
	background:    -ms-linear-gradient(left, #f85032 0%, #e73827 100%);
	background:     -o-linear-gradient(left, #f85032 0%, #e73827 100%);
	background:        linear-gradient(to right, #f85032 0%, #e73827 100%);
}
.sl-btn.radius{
	border-radius:5px;
}

详细：jsfiddle地址

上传excel文件类型

1
<input type="file" name="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">

选中

1
2
3
4
::selection{
	background-color:#16a085;
	color:#fff;
}

重绘scroll

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
	/* type 1 */
.over-scroll{
	overflow-y: auto;
	overflow-x: auto;
}
.over-scroll::-webkit-scrollbar-track{
	/*box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);*/
	border-radius: 3px;
	border:1px solid rgba(0,0,0,.3);
}
.over-scroll::-webkit-scrollbar-thumb{
	background-color: rgba(50, 65, 87, 0.5);
	outline: 1px solid slategrey;
	border-radius: 5px;
}
.over-scroll::-webkit-scrollbar{
	width: 8px;
	height:8px;
}
	/* type 2 */
::-webkit-scrollbar{
    width: 10px;
    height: 10px;
    background-color: rgba(0,0,0,.1);
}
::-webkit-scrollbar-button{
    width: 0;
    height: 0;
}
::-webkit-scrollbar-corner{
    display: block;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb{
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
}
::-webkit-scrollbar-thumb{
    border-radius: 8px;
    background-color: rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb:hover{
    background-color: rgba(0,0,0,.5);
}

重绘radio

1
2
3
4
5
6
7
8
<div class="label-radio">
    <input type="radio" name="radio" id="rad0" value="rad0" checked="checked">
    <label for="rad0">check radio 0</label>
</div>
<div class="label-radio">
    <input type="radio" name="radio" id="rad2" value="rad2">
    <label for="rad2">check radio 2</label>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.label-radio{
    display: inline-block;
}
.label-radio + .label-radio{
    margin-left: 10px;
}
.label-radio input{
    position: absolute;
    display: none;
}
.label-radio label{
    position: relative;
    display: block;
    padding-left: 30px;
    vertical-align: middle;
    cursor: pointer;
}
.label-radio label:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #c0c0c0;
    transition: all .3s;
}
.label-radio label:after{
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #3e97eb;
    /*display: none;*/
    opacity: 0;
    transition: all .3s;
}
.label-radio label:hover:before{
    border-color: #3e97eb;
}
.label-radio input:checked+label:after{
    /*display: block;*/
    opacity: 1;
}
.label-radio input:checked+label:before{
    border: 1px solid #3e97eb;
}

详细：jsfiddle地址

重绘checkbox

1
2
3
4
<label class="label-checkbox" for="land">
    <input id="land" type="checkbox">
    <label for="land"></label>
</label>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.label-checkbox{
	margin-bottom:0;
}
.label-checkbox input{
    width:0;
    visibility:hidden;
}
.label-checkbox label{
    width:15px;
    height:15px;
    cursor:pointer;
    margin-bottom:0;
    border:1px solid #a9a9a9;
    background-color:transparent;
    display:inline-block;
    position:relative;
    vertical-align:middle;
}
.label-checkbox label:after{
    content:'';
    width:9px;
    height:6px;
    top:2px;
    left:2px;
    position:absolute;
    border:2px solid #e60012;
    border-top:none;
    border-right:none;
    -webkit-transform:rotate(-45deg);
       -moz-transform:rotate(-45deg);
            transform:rotate(-45deg);
    opacity:0;
}
.label-checkbox>input:checked+label:after{
    opacity:1;
}

详细：jsfiddle地址

自定义圆or球

1
2
<div class="sl-circle"></div>
<div class="sl-ball"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.sl-circle{
	width:50px;
	height:40px;
	position:relative;
	background:radial-gradient(circle at 25px 20px , #4abc9c 15px, rgba(0, 0, 0, 0) 4px);
	/*radial-gradient(circle at (圆心坐标),圆颜色 圆半径,背景色 圆光晕半径)*/
}
.sl-ball{
	width:50px;
	height:50px;
	border-radius:50%;
	background:radial-gradient(ellipse at 30px 10px, #fff 0%, red 25%,#000 90%);
}

详细：jsfiddle地址

confirm对话框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- first type: -->
<div>
	<div class="layer-mask"></div>
	<div class="layer-dialog">
		<div class="layer-dialog-content">提示内容</div>
		<div class="layer-dialog-btn">
			<a>确定</a>
		</div>
	</div>
</div>

<!-- second type: -->
<div>
	<div class="layer-mask"></div>
	<div class="layer-dialog">
		<div class="layer-dialog-content">提示内容</div>
		<div class="layer-dialog-btn is-cancel">
			<a class="layer-cancel">取消</a>
			<a>确定</a>
		</div>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.layer-mask{
	position:fixed;
	z-index:20;
	top:0;
	right:0;
	left:0;
	bottom:0;
	background:rgba(0,0,0,0.6);
}
.layer-dialog{
	position:fixed;
	z-index:30;
	width:80%;
	max-width:300px;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	background:#fff;
	text-align:center;
	border-radius:3px;
	overflow:hidden;
}
.layer-dialog-content{
	padding:2em 20px 1.5em;
	color:#353535;
	min-height:40px;
	font-size:15px;
	line-height:1.3;
	word-wrap:break-word;
	word-break:break-all;
}
.layer-dialog-btn{
	position:relative;
	line-height:48px;
	border-top: 1px solid #ccc;
}
/* first type */
.layer-dialog-btn>a{
	display:block;
	text-decoration:none;
	color:#0BB20C;
}
/* second type */
.layer-dialog-btn.is-cancel>a{
	display:inline-block;
	text-decoration:none;
	width:49%;
	color:#0BB20C;
}
.layer-dialog-btn.is-cancel .layer-cancel{
	color:#353535;
	border-right:1px solid #e2e2e2;
}

详细：jsfiddle地址

图片模糊效果

1
2
3
<div class="bg-filter">
    <div><div></div></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.bg-filter{
    width:300px;
    height:300px;
    background-image:url(http://up.qqya.com/allimg/201710-t/17-101804_131806.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;
    position:relative;
}
.bg-filter>div{
    position:absolute;
    width:100px;
    height:100px;
    left:200px;
    top:200px;
    overflow:hidden;
}
.bg-filter>div>div{
    position:absolute;
    top:-10px;
    left:-10px;
    right:-10px;
    bottom:-10px;
    background-image:url(http://up.qqya.com/allimg/201710-t/17-101804_131806.jpg);
    /* background-size:300px 300px; */
    background-size:400px 400px;
    background-position:-190px -190px;/*x:200px+(-10px)*/
    -webkit-filter:blur(3px);
            filter:blur(3px);
}

详细：jsfiddle地址

时间线

1
2
3
4
5
<div class="time-line">
    <span class="tline-circle"></span>
    <div class="tline-font">提交申请</div>
    <p class="tline-time">2017-01-22 13:30</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.time-line{
	position: relative;
	padding-bottom:20px;
	color:#8e8e8e;
	font-size: 1.2em;
	width:1px;
	background:#ccc;
}
.time-line:last-child{
	border-left:none;
	width:0px;
}
.time-line .tline-circle{
	position:absolute;
	display:inline-block;
	width:8px;
	height:8px;
	border-radius:50%;
	left:0;
	top:0;
	-webkit-transform:translateX(-50%);
	     -o-transform:translateX(-50%);
	        transform:translateX(-50%);
	background-color:#ccc;
}
.time-line .tline-font,
.time-line .tline-time{
	position:relative;
	top:-8px;
	padding-left:15px;
	min-width: 150px;
}
.time-line .tline-time{
	color:#a9a9a9;
	margin-bottom: 0px;
	padding-top:5px;
	font-size:0.8em;
	top:-15px;
}

详细：jsfiddle地址

input自动补全背景色

1
2
3
4
5
6
7
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus{
	border: 1px solid green;
	-webkit-text-fill-color: green;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

placeholder color

1
2
3
4
5
6
7
input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-ms-input-placeholder{
	color:#c7c7c7;
}

禁止字体放大缩小-iOS

1
2
3
4
5
6
.font{
	-webkit-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-moz-text-size-adjust:none;
	text-size-adjust:none;
}

走马灯-IE

1
2
3
<marquee behavior="alternate" direction="left">
    <div style="color:#e60012">滚啊滚啊滚滚啊滚啊滚</div>
</marquee>
Tags: css
← NEW YEAR ? NEW PLAN ! 使用v-charts所遇问题及解决方法（持续更新06.14） →

扫描二维码，分享此文章