这是 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
}
This is the button style I am supposed to make
我的问题实际上是我想更改按钮颜色。并且想要像 CYAN 这样的颜色，它应该有从上到下的渐变。但是当我使用 btn-cyan bootstrap 类时它不起作用，它不起作用。 This is where I found about btn-cyan class 我应该使用的确切颜色也是“HTML代码:#0C8BCB RGB 代码:R:12 G:139 B:203”。但是当我在 CSS 线性渐变标签中输入这些值时。它不起作用。我尝试删除那个 btn-info 标签并保留它。但它没有用。 请添加解释为什么它不起作用以及你的答案背后的逻辑，我为我的笨拙道歉。
最佳答案
根据您的要求，您需要为您的 css 渐变添加 linear-gradient 属性。请看代码。根据您的要求，我使用了 #0C8BCB 颜色来增强按钮。
.btn-info{
background:linear-gradient(#71d5e2,#0C8BCB );
}This is HTML CODE
<!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>希望这对您有所帮助。
关于html - CSS 渐变不适用于所有引导按钮类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58926332/