Question

我想在nav-bar的上方和下方添加一条在其末尾淡出的线，如下图所示：

到目前为止，这是我的HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>My Portfolio - Home</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="header">
        <h1><a href="index.html">Alex Trotter</a></h1>
        <ul id="nav">
            <li><a href="index.html">Home</a></li>
            <img class="circle" title="circle" alt="circle" src="images/circle.png" />
            <li><a href="about.html">About Me</a></li>
            <img class="circle" title="circle" alt="circle" src="images/circle.png" />
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    <div id="content">
        <div id="webInfo">
            <p>Hi, my name is Alex Trotter and this is my portfolio website</p>
            <p>below you will find some of work that I have created.</p>
            <p>Above you can navigate to different pages to learn more about me.</p>
        </div>
        <div id="exampleWork1"></div>
        <div id="exampleWork2"></div>
        <div id="exampleWork3"></div>
    </div>
</body>

这是我的CSS：

body {
display: block;
margin: 0;
padding: 0px;
}
#header {
background-color: #b9fee2;
width: 1920px;
height: 200px;
display: inline-block;
}
h1 {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 75px;
font-weight: 500;
text-align: center;
margin: 0px;
color: #000000;
text-decoration: none;
}
h1 a {
text-decoration: none;
}
h1 a:visited {
color: #000000;
text-decoration: none;
}
#nav {
display: inline-block;
-webkit-padding-start: 0px;
text-align: center;
margin: auto;
width: 100%;
} 
#nav li {
display: inline-block;
vertical-align: top;
}
#nav a {
-webkit-transition: background-color 0.2s linear;
}
#nav a:link {
display: block;
text-align: center;
color: #000000;
text-decoration: none;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}
#nav a:visited {
color: #000000;
}
#nav a:hover {
display: block;
text-align: center;
color: #000000;
background-color: #FFFFFF;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
font-size: 30px;
}
.circle {
padding-top: 25px;
}

每当我尝试向导航栏添加边框时，它都会穿过整个屏幕，但是如果我这样做以使导航栏边框只有它需要的那么大，导航栏就不会出现。 ; t在屏幕中央。解决这个问题的最佳方法是什么？

Answer 1

一些具有线性渐变背景的定位伪元素可能是最简单的方法。

注意：您的菜单HTML无效，ul只能将li作为直接子项...不是图片，您可以搜索其他菜单分隔符选项。

body {
  margin: 0;
  padding: 0px;
}
#header {
  background-color: #b9fee2;
  height: 200px;
  text-align: center;
}
h1 {
  font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
  font-size: 75px;
  font-weight: 500;
  text-align: center;
  margin: 0px;
  color: #000000;
  text-decoration: none;
}
h1 a {
  text-decoration: none;
}
h1 a:visited {
  color: #000000;
  text-decoration: none;
}
#nav {
  display: inline-block;
  -webkit-padding-start: 0px;
  text-align: center;
  margin: auto;
  position: relative;
}
#nav::before,
#nav:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75) 50%, rgba(0, 0, 0, 0) 100%);
}
#nav::before {
  top: 0;
}
#nav:after {
  bottom: 0;
}
#nav li {
  display: inline-block;
  vertical-align: top;
}
#nav a {
  -webkit-transition: background-color 0.2s linear;
}
#nav a:link {
  display: block;
  text-align: center;
  color: #000000;
  text-decoration: none;
  font-family: Georgia, Times, 'Times New Roman', serif;
  font-size: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 50px;
  padding-right: 50px;
}
#nav a:visited {
  color: #000000;
}
#nav a:hover {
  display: block;
  text-align: center;
  color: #000000;
  background-color: #FFFFFF;
  text-decoration: none;
  padding-left: 50px;
  padding-right: 50px;
  font-size: 30px;
}

<div id="header">
  <h1><a href="index.html">Alex Trotter</a></h1>
  <ul id="nav">
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="about.html">About Me</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
  </ul>
</div>

Answer 2

在CSS中添加

            @Html.Label("Scan PN:   ", new { @class = "DFont"})

        @Html.TextBoxFor(r => r.PEntryBL.PS, new { @class = "pageFont", id = "autoCompletePNBox" })

：

hover

然后添加一个jQuery脚本，并放入

#nav {
    border-top: 2px solid blue;
    border-bottom: 2px solid blue;
}
#nav.noHighlight {
   background:transparent;
   border-color:transparent;
}

如何在导航栏CSS中添加淡化边框

2 个答案: