listen-spacer
文字超出省略:
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浏览器 */

分类:

技术点:

相关文章: