css 开发常用样式

下划线

text-decoration:underline

删除线

text-decoration:line-through

首行缩进

text-indent:2em;

整段文字两端对齐

text-align:justify

css文字超出一行就显示省略号

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

css文字超出部分，隐藏并显示省略号。

overflow:hidden;
word-break: break-all;  /* break-all(允许在单词内换行。) */
text-overflow:ellipsis;/* 超出部分省略号 */
display:-webkit-box;/** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient:vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp:2;/** 显示的行数 **/

元素旋转180度

transform:rotate(180deg);

元素翻转

transform:scaleY(-1)

文字排版中标点符号在行首出现的解决方法

word-break: normal; //自动换行, 标点不出现在行首
text-align: justify; //为了显示好看, 文本对齐

阴影

box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);

两种或多种颜色线性渐变

background-image: linear-gradient(red , yellow);//从上到下，从红色开始，转为黄色
background-image: linear-gradient(to right, red , yellow);//从左侧开始的线性渐变，从红色开始，转为黄色
background-image: linear-gradient(to right, red,orange,yellow,green,blue);//多个颜色
background-image: linear-gradient(to bottom right, red , yellow);//从左上角到右下角的线性渐变

背景透明1(可设置透明度)
注：如果背景上面有文字的话，那么文字也会变成透明

background: red;
opacity: 0.1;//0至 1，完全透明是 0，完全不透明是 1

背景透明2(可设置透明度)

background-color:rgba(225,0,0,0.1);

背景透明3

background: transparent;