html - 在navbar品牌附近添加照明效果到背景

我正在尝试应用一种类似于下面链接到我正在制作的网站上的照明效果。我不确定从哪里开始，也找不到在线或堆栈溢出的类似问题。有指针吗？

最佳答案

将CSS3渐变与ul和li标记一起使用

#my-nav {

background: rgb(254,204,177); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,204,177,1) 0%, rgba(241,116,50,1) 34%, rgba(234,85,7,1) 61%, rgba(251,149,94,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 34%,rgba(234,85,7,1) 61%,rgba(251,149,94,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 34%,rgba(234,85,7,1) 61%,rgba(251,149,94,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */
border-radius: 7px;
}
#my-nav a {
  color: #FFF;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav" id="my-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">ABOUT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">BLOG</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">SOLUTIONS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">BOOKS</a>
      </li>
    </ul>