时间戳

首页 > 解决方案 > CSS Gradient 不适用于所有引导按钮类

html - CSS Gradient 不适用于所有引导按钮类

问题描述

这是 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Assignment1_2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href= "css/assignment3.css">
  <!----I used indexing using class names from K-K1 in css stylesheet-->
</head>
<body>
       <div class="container" id="K2">
           <div class="row my-5 py-5 mx-2 px-2">
               <span class="d-xl-block w-100 mx-4 pt-5 pb-4 K1">
                    <div class="container pt-3 ml-3">
                        <div class="row pb-0 pt-5" >
                             <div class="col-md-3"> 
                                <button type="button" class="btn btn-info K">Buy Now</button>
                             </div>
                             <div class="col-md-9">
                                 <button type="button" class="btn btn-info K">Larger Button To Test that
                                        we did it correctly.
                                 </button>
                             </div>
                        </div>
                    </div>
               </span>
           </div> 
       </div>
</body>
</html>


````````````
this is CSS for that
```````````
#K2 .K{background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0)); 
    border-radius: 60px; border-style: none}
#K2 .K1{
  margin: 10px;
  box-shadow: 0 5px 10px -2.5px;
  background-color: #a5aab1;
  border-radius: 14px
  }

这是我应该制作的按钮样式

我的问题实际上是我想更改按钮颜色。并且想要像青色这样的颜色，它应该有从上到下的渐变。但是当我使用 btn-cyan 引导类时它不起作用。这是我发现关于 btn-cyan 类的地方 我 应该使用的确切颜色是“HTML 代码：#0C8BCB RGB 代码：R：12 G：139 B：203”。但是当我在 CSS 线性渐变标签中输入这些值时。它不工作。我尝试删除该 btn-info 标记并保留它。但它没有用。请添加解释为什么它不起作用以及您的答案背后的逻辑，我为我的菜鸟道歉。

标签： htmlcssbootstrap-4

解决方案

您应该从您的 CSS 中删除不需要的代码。而且我不允许展示你的风格..就像这样尝试

css

.container button{
  background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0)); 
    border-radius: 60px; 
    border-style: none;
    }
.container .K1{
  margin: 10px;
  box-shadow: 0 5px 10px -2.5px;
  background-color: #a5aab1;
  border-radius: 14px
  }

推荐阅读