常用css样式

一、文本样式

1、常用的

text-decoration: underline; 下划线 
text-decoration: line-through; 横贯线
text-decoration: underline wavy red; 下划线是红色的波浪

letter-spacing: -0.05rem;字间距
font-style: italic;斜体

text-shadow:#F00 3px 4px 5px; //字投影 一个阴影颜色、阴影字体左上角起靠左距离、阴影字体左上角起靠上距离、阴影高度宽度大小（模糊程度）
eg:
text-shadow:0 0 0.2rem #d57b05,-0 -0 0.2rem #d57b05!important;

text-shadow:-1px 0 black,
                0 1px black,
                1px 0 black,
                0 -1px black; //字描边

text-shadow:0 0 0.2em #f87,-0 -0 0.2em #f87; //字发光

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

2、文字的渐变

https://www.cnblogs.com/shenjp/p/11060608.html

https://www.cnblogs.com/ypppt/p/13334613.html

3、文字内容底部对齐

 display:table-cell; 
  vertical-align:bottom;

    或者

  display:flex;
  align-items:flex-end;

二、div样式

1、border：

border: 1px dotted #bfbfbf; 虚线描边
border-bottom-left-radius: 0.32rem;
border-top-left-radius: 0.32rem;

2、div渐变及阴影：

background-image: linear-gradient(to right,#ffc560, #fda14c);渐变从左往右
background-image: linear-gradient(0deg, red, green);渐变从上到下
background-image: -webkit-linear-gradient(0deg, red, green);

box-shadow: 0.125rem 0.2175rem 0.125rem 0.125rem #cff0ff; 右下角阴影
box-shadow: 0rem 0.125rem 0.125rem 0.1rem #e5e5e5; 向下阴影外部

box-shadow: inset -0.106667rem 0rem 0rem 0rem rgba(106, 85, 55, 0.9),
　　　　　　　inset 0rem .106667rem 0rem 0rem rgba(106, 85, 55, 0.9),
　　　　　　  inset .106667rem 0rem 0rem 0rem rgba(106, 85, 55, 0.9),
　　　　　　  inset 0rem -0.106667rem 0rem 0rem rgba(145, 117, 78, 0.9); 向内阴影

3、div内发光:

box-shadow:rgb(11, 234, 235) 0px 0px 18px inset;

4、旋转一定角度:

transform: rotate(40deg);

5、

.welfare1 .price span:nth-child(1) {
-webkit-text-fill-color: #e41515;
/*文字的填充色*/
-webkit-text-stroke: 0.04rem #fff;
/*描边的像素，也就是粗细，这里指定是2像素的黑色边框*/
}