css同时设置文字渐变色和文本阴影效果

清清前端

已于 2023-08-02 08:44:54 修改

阅读量1.2k

点赞数

文章标签： css 前端

于 2023-08-01 17:43:03 首次发布

本文链接：https://blog.csdn.net/qing_er_/article/details/132047358

版权

写样式时发现可以给文本设置渐变色，或者单独设置text-shadow，但是同时设置就会有问题，然后找到了解决办法，记录一下。

html：

<div class="headTitle">后台管理系统</div>

css：

.headTitle {
  font-size: 35px;     //文字尺寸大小
  font-weight: 550;   //文字加粗效果
  background-image: linear-gradient(to bottom, #067ec2, #134675); //向下线性渐变
  -webkit-background-clip: text;       //背景裁剪
  color: transparent;                 //背景颜色为透明
}
.headTitle::before {
  content: "后台管理系统";      //白色阴影文字
  position: absolute;         //绝对定位
  z-index: -1;               //理解成一个层叠效果 z-index:-1; 就是在平面的下面一层 
  text-shadow:0 0 6px #fff; //白色阴影效果
}

效果：