导航栏渐变颜色

Question

如何为这样的导航栏上色？

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

Answer 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 );
}

<div class="box"></div>

Answer 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>

Answer 3

这可能就是你要找的东西。

.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;
}

<div class='box'></div>