css样式

1. css文字超出宽度显示成…

.txt{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
/* 如果没有文字超出隐藏的效果，可以加上min-width:0*/

2. 弹性布局自适应垂直居中

.div{
	display:flex;
	flex-direction:column; // 意义为：弹性盒子中的内容排列方式为纵列排列。
	justify-content:center; // 元素开始的对齐方式 从中间开始对齐。 flex-start | flex-end | center | space-between | space-around;
}

附W3C display弹性布局链接：http://www.runoob.com/w3cnote/flex-grammar.html
3.css渐变色边框

效果图：

4. css四角边框样式

.box{
            width: 300px;
            height: 300px;
            margin: 300px auto;
            border: 2px solid #eeeeee;
            /* 以下为css样式 */
            background:
            linear-gradient(red, red ) left top,
            linear-gradient(blue, blue ) left top,
            /* 以上为左上角 */
            linear-gradient(red, red ) left bottom,
            linear-gradient(yellow, yellow ) left bottom,
            /* 以上为左下角 */
            linear-gradient(red, red ) right top,
            linear-gradient(black, black ) right top,
            /* 以上为右下角 */
            linear-gradient(red, red ) right bottom,
            linear-gradient(green, green ) right bottom;
            /* 以上为右下角 */
            background-repeat: no-repeat;
            background-size: 4px 50px, 50px 4px;
        }

效果图：

5. 文字的横向距离

p{
	letter-spacing: 0.15em;
}

6. css3媒体查询
引用链接