CSS背景线性渐变 linear-gradient

最新推荐文章于 2024-03-20 02:01:24 发布

琉璃 lele

最新推荐文章于 2024-03-20 02:01:24 发布

阅读量705

点赞数 1

分类专栏：一些小记录文章标签： css

本文链接：https://blog.csdn.net/weixin_42361858/article/details/117703675

版权

一些小记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

线性渐变如：(百分比是位置)
background: linear-gradient(to right, rgba(0,0,0,.1) 0%, rgba(0,0,0,.8) 50%, rgba(0,0,0,.1) 100%);

示例：
页面背景色#F6F6F6，文字颜色#FFFFFF，用到线性渐变包括左->中<-右及上->下的颜色加深

<div class="title"><p><span>出品人</span></p></div>

.title{
  width: 100%;
  text-align: center;
}
p{
  width: 238px;
  height: 47px;
  margin: 0 auto;
  /* 写的时候用的 下->上 颜色变浅所以是 to top */
  background: linear-gradient(to top, rgba(43,99,170,.25) 0%,rgba(43,99,170,.05) 20%,rgba(43,99,170,.05) 30%,rgba(43,99,170,.02) 50%,rgba(62,144,204,.1) 95%, rgba(62,144,204,.1) 100%);
}
span{
  display: inline-block;
  width: 238px;
  height: 47px;
  line-height: 47px;
  font-size: 36px;
  font-family: PingFang SC Heavy;
  font-weight: 800;
  color: #FFFFFF;
  /* 0%和100%即最左最右颜色最浅 */
  background: linear-gradient(to right, rgba(250,250,250,1) 0%,rgba(62,144,204,.05) 12%,rgba(62,144,204,.35) 25%, rgba(62,144,204,.75) 36%,rgba(62,144,204,1) 50%,rgba(62,144,204,.75) 64%,rgba(62,144,204,.35) 75%,rgba(62,144,204,.05) 88%, rgba(250,250,250,1) 100%);
}

css效果：