导航栏渐变色答案

【问题标题】：Navigation bar gradient color导航栏渐变色
【发布时间】：2017-05-19 21:24:07
【问题描述】：

我怎样才能像这样为导航栏着色？

左上角为黑色，右下角为蓝色，并在它们之间制作渐变。

【问题讨论】：

发帖前有没有试过找css渐变？如果是这样，您尝试了什么？

标签： html css

【解决方案1】：

没有。 1 这不是你要求的正确方式，

我有这个概念，这就是我给你的原因，下次你问任何问题时，请检查这个，

Stack Overflow 不是免费的代码编写服务。您应该尝试自己编写代码。在进行更多研究后，如果您有问题，您可以发布您尝试过的内容，并清楚地解释什么不起作用并提供Minimal, Complete, and Verifiable 示例。我建议你阅读How to Ask a good question。

现在试试这个，

.box{
width: 150px;
height: 50px;
border-radius: 0px 0px 0px 7px;
background: rgba(0,0,0,1);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(34%, rgba(0,0,0,1)), color-stop(100%, rgba(44,153,221,1)));
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2c99dd', GradientType=1 );
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

感谢您的帮助，对于没有发布代码以及到目前为止我发现的内容，我深表歉意。这是我第一次提出问题，但我真的不知道如何开始。我已经看到在没有代码的情况下提出了更多问题，所以我认为这不会是一个问题。我只需要对这个概念进行解释，看看如何使用渐变为元素着色。没想到还有人替我写代码。但是再次感谢我下次发布问题时会注意的！

【解决方案2】：

如果你想了解线性渐变的工作原理，我会去这里：MDN linear-gradient

.link {
  width: 100px;
  height: 1.5em;
  display: inline-block;
  background: linear-gradient(135deg, black 30%, DeepSkyBlue 100%);
}

<nav>
  <a class="link"></a>
  <a class="link"></a>
  <a class="link"></a>
  <a class="link"></a>
</nav>

【讨论】：

感谢您的帮助！非常感谢:)

【解决方案3】：

这可能就是你要找的。p>

.box {
background: rgba(0,0,0,1);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(18%, rgba(0,0,0,1)), color-stop(100%, rgba(3,152,252,1)));
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: linear-gradient(135deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#0398fc', GradientType=1 );
  height: 80px;
  width: 200px;
}

&lt;div class='box'&gt;&lt;/div&gt;

【讨论】：

感谢您的帮助！ :)