Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	background-color:#1d2025;
	font-family:'Arail';
}
a {
	text-decoration:none;
}
h2 {
	text-align:center;
	padding:20px 0;
	background:-webkit-linear-gradient(left,#ffcb52 50%,#ff451f 80%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
.container {
	width:400px;
	margin:10px auto 0;
	background:#ddd;
}
.justify {
	position:relative;
	width:100%;
	height:30px;
	text-align:justify;
	margin-bottom:20px;
}
i {
	width:30px;
	line-height:30px;
	display:inline-block;
	text-align:center;
	background:#333;
	color:white;
	border-radius:50%;
	overflow:hidden;
	font-style:normal;
}
.justify:after {
	content:"";
	display:inline-block;
	position:relative;
	width:100%;
}
p {
	width:380px;
	padding:10px;
	margin:5px auto;
	background:-webkit-linear-gradient(left,#3dade9,#bf2fcb);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	box-shadow:0 1px 0 1px rgba(43,220,146,0.25),0 -1px 0 1px rgba(129,214,106,0.25),1px 0 0 1px rgba(43,220,146,0.25),-1px 0 0 1px rgba(129,214,106,0.25),1px -1px 0 1px rgba(86,217,126,0.5),-1px 1px 0 1px rgba(86,217,126,0.5),1px 1px 0 1px rgba(0,223,166,0.75),-1px -1px 0 1px rgba(173,211,86,0.75);
}

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

css多列均匀布局问题

多列均匀布局问题理解: 
通过给父级容器的伪元素( :after) 设置 inline-block ,设置宽度 100% ,配合容器的 text-align: justify 就可以轻松实现多列均匀布局; 再多配合几句 hack 代码,可以实现兼容到 ie6+ ,最重要的是代码不长,很好理解。

0