Web实现：背景颜色渐变色

最新推荐文章于 2023-04-12 00:09:54 发布

jasmyn518

最新推荐文章于 2023-04-12 00:09:54 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS HTML 笔记文章标签：前端 css html

本文链接：https://blog.csdn.net/jasmyn518/article/details/122569165

笔记同时被 3 个专栏收录

127 篇文章

订阅专栏

HTML

78 篇文章

订阅专栏

CSS

68 篇文章

订阅专栏

HTML部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
  </head>
  <body>
    <button class="publish">我要提问</button>
  </body>
</html>

CSS部分：

.publish {
  width: 100%;
  height: 50px;
  line-height: 50px;


    /*渐变方向*/
  background: linear-gradient(to right, #95ca47, #4dc891);/*从左到右*/
  background: linear-gradient(to left bottom, #95ca47, #4dc891);/*从右上到左下*/
  
    /*渐变位置*/
  background: linear-gradient(to right, #95ca47 30%, #4dc891 70%);/*百分比用来约定渐变的起止位置*/
  color: #fff;
  font-size: 18px;
  border-radius: 4px;
  font-weight: 500;
  box-shadow: 0 2px 6px 0 rgba(104, 200, 116, 0.3); /*1*/
}