文字超出省略:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
前提要设置固定的宽度
多行文字省略(指在webkit内核下生效)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
flex布局——垂直水平居中
display: flex;
justify-content: center;
align-items: center;
flex布局——控件自适应平分
父组件:
display:flex;
子组件:
flex-grow: 1; // 水平平分
flex-flow: 1; // 垂直平分
flex-direction: column; // 通过调整主轴的对齐方式
文字对齐方式
vertical-align: middle; // 调整文字与内容对齐方式
设置padding会导致控件溢出或变大(部分情况下)
box-sizing: border-box; // 改变盒子类型 将内填充也算作盒子的大小
css3发光字体
属性:text-shadow: 0 0 40px #136991;
文字渐变色
background-image: linear-gradient(to bottom, #d49e34, #fff17d);
color: transparent;
-webkit-background-clip: text;
修改input、textarea元素中的placeholder属性样式
input::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */
input:-moz-placeholder{} /* Firefox版本4-18 */
input::-moz-placeholder{} /* Firefox版本19+ */
input:-ms-input-placeholder{} /* IE浏览器 */