Html
    Css
    Js

    
                        
        body {
	background-color:#000;
}
img {
	margin:0 auto;
	display:block;
}
ul {
	list-style:none;
	margin:0;
	padding:0;
	height:60px;
	text-align:center;
}
li {
	display:inline-block;
	color:#fff;
	margin:0 20px;
	padding-bottom:4px;
	border-bottom:2px solid #fff;
	cursor:pointer;
}
li:nth-of-type(1) {
	border-bottom-color:red;
}
li:nth-of-type(2) {
	border-bottom-color:blue;
}
li:nth-of-type(3) {
	border-bottom-color:yellow;
}
li:nth-of-type(4) {
	border-bottom-color:green;
}
li:nth-of-type(5) {
	border-bottom-color:#fff;
}
li:nth-of-type(6) {
	border-bottom-color:#f40;
}
.inp {
	width:200px;
	height:100px;
	margin:20px auto 0;
	color:#fff;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS3图片滤镜效果

0