一、文本样式
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像素的黑色边框*/ }
标签:0rem,常用,样式,text,阴影,1px,rem,shadow,css From: https://www.cnblogs.com/redFeather/p/16744868.html