首页 > 其他分享 >常用css样式

常用css样式

时间:2022-09-30 15:27:13浏览次数:93  
标签:0rem 常用 样式 text 阴影 1px rem shadow 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像素的黑色边框*/
}

 

标签:0rem,常用,样式,text,阴影,1px,rem,shadow,css
From: https://www.cnblogs.com/redFeather/p/16744868.html

相关文章

  • css动画
    一、CSS3过渡动画:div{width:100px;height:100px;background:yellow;transition:width2s;-moz-transition:width2s;/*Firefox4*/-webkit-transition:width......
  • js改变元素样式
    一、jQuery设置元素样式jQuery可以使用css()方法来修改简单元素样式;也可以操作类,修改多个样式。1、参数只写属性名,则返回属性值$("div").css("color");2、参数是属......
  • 常用缺省源
    顺便推销一下cnblog。\(\texttt{update}2022/9/23\):将48(ASCII'0'=48)换成了0x30。真高级!\(\texttt{update}2022/9/30\):才学会了fread()优化快读(原因是因为Ynoi......
  • 数车常用的断屑方法
    一、利用材料变形进行断屑1、利用断屑槽断屑槽不仅对切屑起附加变形的作用,而且还能实现控制切屑的卷曲与折断。只要断屑槽的形状、尺寸及断屑槽与主切削刃的倾斜角合适,断屑......
  • 铣削加工常用的四种刀具及差别
    1、平铣刀(圆柱形铣刀)平铣刀为卧式铣床上加工平面最常用之刀具,平铣刀为圆盘型或圆柱型,外圆周上有刀齿,用于铣削与刀轴平行之平面,平铣刀的刀刃有直刃形,与螺旋刃形,一般以螺旋刃......
  • 常用注解:Java、Spring框架
    Java8SpringFramework/Boot/Web-- Java中的注解【很神奇】。ben发布于博客园虽然用过很多,但是,对其感知仍然模糊,应该是对它们的使用原理不清楚所致。本文仅整理一......
  • Streamlit常用组件
    一、前言因为Streamlit的组件使用比较简单,我下面直接贴图和上代码,就不一一细说了,详细的可以查看官方文档二、Streamlit常用组件1、效果图 (图1)     ......
  • docker容器的创建及常用操作命令详解
    docker容器简介容器就是对外提供服务的一个实例。容器启动的必要条件:容器内至少有一个进程运行在前台1、创建容器1234567891011121314151617......
  • Markdown常用语法
    Markdown学习(建议使用Typora,可观看源代码模式)标题:#空格+标题名字二级标题三级标题n级标题:n个#空格+标题名字(最多只到六级标题)字体Hello,World!Hello,World!左右各加......
  • mysql常用命令
    CREATEUSER'用户名'@'可连接ip,%表示任意ip'IDENTIFIEDBY'密码';DROPUSER[IFEXISTS]存在才删除 user[,user]...用户列表DROP USER IF EXISTS 用户名GRA......