如何在 css 中制作顶部和底部颜色不同且底部有阴影的边框？

Question

如何在附图中实现导航菜单（黄色渐变div）周围的边框效果？

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  border: none;
  line-height: 1;
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

#cssmenu {
  height: 61px;
  display: block;
  border: 1px solid;
  border-radius: 5px;
  width: auto;
  border-color: #c09a5d;
  margin: 0;
  padding: 0;
}

#cssmenu>ul {
  list-style: inside none;
  margin: 0;
  padding: 0;
}

#cssmenu>ul>li {
  list-style: inside none;
  float: left;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
}

#cssmenu.align-center>ul {
  text-align: center;
  font-size: 0;
}

#cssmenu.align-center>ul>li {
  float: none;
  display: inline-block;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-center>ul>li:first-child>a {
  border-radius: 0;
}

#cssmenu>ul>li>a {
  outline: none;
  display: block;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  padding: 20px 26px;
}

#cssmenu>ul>li:first-child>a {
  /* border-radius: 5px 0 0 5px; */
}

#cssmenu>ul>li>a:after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -2px;
  z-index: 99;
  border-color: #dcc8a7;
}

#cssmenu ul li.has-sub:hover>a:after {
  top: 0;
  bottom: 0;
}

#cssmenu>ul>li.has-sub>a:before {
  content: "";
  position: absolute;
  top: 28px;
  right: 6px;
  border: 5px solid transparent;
  border-top: 5px solid #ffffff;
}

#cssmenu>ul>li.has-sub:hover>a:before {
  top: 19px;
}

#cssmenu>ul>li.has-sub:hover>a {
  padding-bottom: 14px;
  z-index: 999;
  border-color: #3f3f3f;
}

#cssmenu ul li.has-sub:hover>ul,
#cssmenu ul li.has-sub:hover>div {
  display: block;
}

#cssmenu>ul>li.has-sub>a:hover,
#cssmenu>ul>li.has-sub:hover>a {
  background: #3f3f3f;
  border-color: #3f3f3f;
}

#cssmenu ul li>ul,
#cssmenu ul li>div {
  display: none;
  width: auto;
  position: absolute;
  top: 38px;
  background: #3f3f3f;
  border-radius: 0 0 5px 5px;
  z-index: 999;
  padding: 10px 0;
}

#cssmenu ul li>ul {
  width: 200px;
}

#cssmenu ul ul ul {
  position: absolute;
}

#cssmenu ul ul li:hover>ul {
  left: 100%;
  top: -10px;
  border-radius: 5px;
}

#cssmenu ul li>ul li {
  display: block;
  list-style: inside none;
  position: relative;
  margin: 0;
  padding: 0;
}

#cssmenu ul li>ul li a {
  outline: none;
  display: block;
  position: relative;
  font: 10pt Arial, Helvetica, sans-serif;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 8px 20px;
}

#cssmenu,
#cssmenu ul ul>li:hover>a,
#cssmenu ul ul li a:hover {
  background: #e6cfa4;
  background: -moz-linear-gradient(top, #e6cfa4 0%, #b4915d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e6cfa4), color-stop(100%, #b4915d));
  background: -webkit-linear-gradient(top, #e6cfa4 0%, #b4915d 100%);
  background: -o-linear-gradient(top, #e6cfa4 0%, #b4915d 100%);
  background: -ms-linear-gradient(top, #e6cfa4 0%, #b4915d 100%);
  background: linear-gradient(top, #e6cfa4 0%, #b4915d 100%);
}

#cssmenu>ul>li>a:hover {
  background: #c09a5d;
  color: #ffffff;
}

#cssmenu ul ul a:hover {
  color: #ffffff;
}

#cssmenu>ul>li.has-sub>a:hover:before {
  border-top: 5px solid #ffffff;
}

.menu-container {
  background: transparent;
  z-index: 1;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #424137;
}

<div class="row menu-container">
  <div id="cssmenu">
    <ul>
      <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> HOME</a></li>
    </ul>
  </div>
</div>

[这里有一些我刚刚编造的令人惊奇的细节，因为如果没有这些奢侈的话，SO 不会让我 post。哇，这些话放在这里很有用。]

到目前为止我有： https://jsfiddle.net/pyn4u6nz/

Answer 1

更新以下部分css

#cssmenu {
  height: 61px;
  display: block;
  border-radius: 5px;
  width: auto;
  border-top:1px solid #c09a5d; /* Add this property border color as you want */
  border-bottom:1px solid tomato; /* Add this property color as you want */
  box-shadow:0px 10px 20px rgba(0,0,0,0.5); /* Add this property for shadow */
  margin: 0;
  padding: 0;
}

Update fiddle code

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  border: none;
  line-height: 1;
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

#cssmenu {
  height: 61px;
  display: block;
  border-radius: 5px;
  width: auto;
  border-top:1px solid #c09a5d;
  border-bottom:1px solid tomato;
  box-shadow:0px 10px 20px rgba(0,0,0,0.5);
  margin: 0;
  padding: 0;
}
#cssmenu > ul {
  list-style: inside none;
  margin: 0;
  padding: 0;
}
#cssmenu > ul > li {
  list-style: inside none;
  float: left;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
}
#cssmenu.align-center > ul {
  text-align: center;
  font-size: 0;
}
#cssmenu.align-center > ul > li {
  float: none;
  display: inline-block;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-center > ul > li:first-child > a {
  border-radius: 0;
}
#cssmenu > ul > li > a {
  outline: none;
  display: block;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  padding: 20px 26px;
}
#cssmenu > ul > li:first-child > a {
  /* border-radius: 5px 0 0 5px; */
}
#cssmenu > ul > li > a:after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -2px;
  z-index: 99;
  border-color: #dcc8a7;
}
#cssmenu ul li.has-sub:hover > a:after {
  top: 0;
  bottom: 0;
}
#cssmenu > ul > li.has-sub > a:before {
  content: "";
  position: absolute;
  top: 28px;
  right: 6px;
  border: 5px solid transparent;
  border-top: 5px solid #ffffff;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 19px;
}
#cssmenu > ul > li.has-sub:hover > a {
  padding-bottom: 14px;
  z-index: 999;
  border-color: #3f3f3f;
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {
  display: block;
}
#cssmenu > ul > li.has-sub > a:hover,
#cssmenu > ul > li.has-sub:hover > a {
  background: #3f3f3f;
  border-color: #3f3f3f;
}
#cssmenu ul li > ul,
#cssmenu ul li > div {
  display: none;
  width: auto;
  position: absolute;
  top: 38px;
  background: #3f3f3f;
  border-radius: 0 0 5px 5px;
  z-index: 999;
  padding: 10px 0;
}
#cssmenu ul li > ul {
  width: 200px;
}
#cssmenu ul ul ul {
  position: absolute;
}
#cssmenu ul ul li:hover > ul {
  left: 100%;
  top: -10px;
  border-radius: 5px;
}
#cssmenu ul li > ul li {
  display: block;
  list-style: inside none;
  position: relative;
  margin: 0;
  padding: 0;
}
#cssmenu ul li > ul li a {
  outline: none;
  display: block;
  position: relative;
  font: 10pt Arial, Helvetica, sans-serif;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 8px 20px;
}
#cssmenu,
#cssmenu ul ul > li:hover > a,
#cssmenu ul ul li a:hover {
  background: #e6cfa4;
  background: -moz-linear-gradient(top,  #e6cfa4 0%, #b4915d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e6cfa4), color-stop(100%, #b4915d));
  background: -webkit-linear-gradient(top, #e6cfa4 0%, #b4915d 100%);
  background: -o-linear-gradient(top,  #e6cfa4 0%, #b4915d 100%);
  background: -ms-linear-gradient(top,  #e6cfa4 0%, #b4915d 100%);
  background: linear-gradient(top,  #e6cfa4 0%, #b4915d 100%);
}
#cssmenu > ul > li > a:hover {
  background: #c09a5d;
  color: #ffffff;
}
#cssmenu ul ul a:hover {
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a:hover:before {
  border-top: 5px solid #ffffff;
}
.menu-container {
    background: transparent;
    z-index: 1;
    border-radius: 5px;
    border: 1px solid #424137;
}

<div class="row menu-container">
  <div id="cssmenu">
  <ul>
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> HOME</a></li>
  </ul>
</div>
</div>

Answer 2

首先，里面有很多重叠的额外内容 CSS。但似乎你已经设置了所有内容，你需要做的就是删除 #cssmenu 上的 "border" 和 "border-color"，这是添加第二个边框（菜单容器已经有）并替换为顶部和底部：

border-top: 1px solid #fff;
border-bottom: 1px solid yellow;

Answer 3

您可以将此 CSS 渐变添加到您的 .cssmenu。你应该稍微清理一下你的 CSS 代码。有很多代码不应该在那里，或者以不同的方式出现。您以后可能会遇到一些维护问题。

  background: #f9f5eb; /* Old browsers */
  background: -moz-linear-gradient(top, #f9f5eb 0%, #efd9b0 4%, #b88f59 98%, #e8da83 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f9f5eb 0%,#efd9b0 4%,#b88f59 98%,#e8da83 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f9f5eb 0%,#efd9b0 4%,#b88f59 98%,#e8da83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

如何在 css 中制作顶部和底部颜色不同且底部有阴影的边框？

How do I make a border in css that has different color on top and bottom, and has some shadow at the bottom?

css

border