Html 如何将淡入淡出的边框添加到导航栏CSS
我想在导航条上方和下方添加一条线，该线将在其末端淡出，如下图所示： 这是迄今为止我的HTML：Html 如何将淡入淡出的边框添加到导航栏CSS,html,css,Html,Css,我想在导航条上方和下方添加一条线，该线将在其末端淡出，如下图所示： 这是迄今为止我的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
<!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>
每当我尝试向导航栏添加边框时，它都会穿过整个屏幕，但如果我这样做，使导航栏边框只与需要的一样大，导航栏就不会位于屏幕的中心。解决这个问题的最佳方法是什么？两个带线性梯度背景的定位伪元素可能是最简单的方法 注意：您的菜单HTML无效，
ulli正文{
保证金：0；
填充：0px；
}
#标题{
背景色：#b9fee2；
高度：200px；
文本对齐：居中；
}
h1{
字体系列：Optima、Segoe、“Segoe UI”、Candara、Calibri、Arial、无衬线字体；
字体大小：75px；
字号：500；
文本对齐：居中；
边际：0px；
颜色：#000000；
文字装饰：无；
}
H1A{
文字装饰：无；
}
H1A：访问{
颜色：#000000；
文字装饰：无；
}
#导航{
显示：内联块；
-webkit填充开始：0px；
文本对齐：居中；
保证金：自动；
位置：相对位置；
}
#导航：之前，
#导航：之后{
内容：''；
位置：绝对位置；
左：0；
宽度：100%；
高度：2倍；
背景：线性梯度（向右，rgba（0,0,0,0），rgba（0,0,0,75）50%，rgba（0,0,0,0）100%）；
}
#导航：之前{
排名：0；
}
#导航：之后{
底部：0；
}
#李海军{
显示：内联块；
垂直对齐：顶部；
}
#导航a{
-webkit过渡：背景色0.2s线性；
}
#导航a：链路{
显示：块；
文本对齐：居中；
颜色：#000000；
文字装饰：无；
字体系列：佐治亚，泰晤士报，'泰晤士报新罗马'，衬线；
字体大小：30px；
填充顶部：10px；
垫底：10px；
左侧填充：50px；
右边填充：50px；
}
#导航a：已访问{
颜色：#000000；
}
#导航a：悬停{
显示：块；
文本对齐：居中；
颜色：#000000；
背景色：#FFFFFF；
文字装饰：无；
左侧填充：50px；
右边填充：50px；
字体大小：30px；
}
悬停：
#nav {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
#nav.noHighlight {
background:transparent;
border-color:transparent;
}
然后添加jQuery脚本，并将
setTimeout(function(){
$('#abc').fadeIn();
$('#abc').addClass('noHighlight');
},1000);
使用：：before和：：after，并为背景应用CSS渐变。
setTimeout(function(){
$('#abc').fadeIn();
$('#abc').addClass('noHighlight');
},1000);