div+css实现条形码效果代码-html代码-BFW代码库

div+css实现条形码效果代码

代码语言：html

代码描述：div+css实现条形码效果代码的按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    html {
	height:100%;
}
body {
	height:100%;
	padding:0;
	background:#e0e0e0;
}
ul,li {
	list-style:none;
	margin:0;
	padding:0;
}
ul {
	position:relative;
	top:40%;
	display:table;
	margin:-50px auto;
	padding:10px 15px;
	background:#f0f0f0;
	box-shadow:0px 1px 10px -5px #000;
	border-radius:3px;
}
li {
	display:table-cell;
	position:relative;
	width:14px;
	height:100px;
	overflow:hidden;
}
li::before {
	content:'';
	position:absolute;
	left:-2px;
	top:0;
	width:2px;
	bottom:18px;
}
li::after {
	content:'';
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	text-align:center;
	height:18px;
	line-height:18px;
	color:#802020;
	font-family:'Courier New',mono;
	font-weight:bold;
	font-size:14px;
}
li:nth-child(2).digit-0::before,li:nth-child(3).digit-0::before,li:nth-child(4).digit-0::before,li:nth-child(5).digit-0::before,li:nth-child(6).digit-0::before,li:nth-child(7).digit-0::before {
	box-shadow:2px 0px 0px 0px #f0f0f0,4px 0px 0px 0px #f0f0f0,6px 0px 0px 0px #f0f0f0,8px 0px 0px 0px #404040,10px 0px 0px 0px #404040,12px 0px 0px 0px #f0f0f0,14px 0px 0px 0px #404040;
}
li:nth-child(2).digit-0::after,li:nth-child(3).digit-0::after,li:nth-child(4).digit-0::after,li:nth-child(5).digit-0::after,li:nth-child(6).digit-0::after,li:nth-child(7).digit-0::after {
	content:'0';
}
li:nth-child(2).digit-1::before,li:nth-child(3).digit-1::before,li:nth-child(4).digit-1::before,li:nth-child(5).digit-1::before,li:nth-child(6).digit-1::before,li:nth-child(7).digit-1::before {
	box-shadow:2px 0px 0px 0px #f0f0f0,4px 0px 0px 0px #f0f0f0,6px 0px 0px 0px #404040,8px 0px 0px 0px #404040,10px 0px 0px 0px #f0f0f0,12px 0px 0px 0px #f0f0f0,14px 0px 0px 0px #404040;
}
li:nth-child(2).digit-1::after,li:nth-child(3).digit-1::after,li:nth-child(4).digit-1::after,li:nth-child(5).digit-1::after,li:nth-child(6).digit-1::after,li:nth-child(7).digit-1::after {
	content:'1';
}
li:nth-child(2).digit-2::before,li:nth-child(3).digit-2::before,li:nth-child(4).digit-2::before,li:nth-child(5).digit-2::before,li:nth-child(6).digit-2::before,li:nth-child(7).digit-2::before {
	box-shadow:2px 0px 0px 0px #f0f0f0,4px 0px 0px 0px #f0f0f0,6px 0px 0px 0px.........完整代码请登录后点击上方下载按钮下载查看