如何解决面包屑项目的边框着色
到目前为止,我取得了一些不错的进展。但是我无法将这些边框颜色添加到<li>
项目中。我怎样才能做到这一点 ?这是我到目前为止所做的。
#breadcrumbs{
overflow: hidden;
width: 100%;
list-style: none;
margin-bottom: 0px;
}
#breadcrumbs li{
float: left;
margin: 0 .3em 0 1em;
font-size: 18px;
font-weight: 400;
letter-spacing: 1px;
}
#breadcrumbs a{
background: #eef6f8;
padding: .4em 1em;
float: left;
text-decoration: none;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,.5);
position: relative;
}
#breadcrumbs > li.active > a{
background:#00305e;
color: #fff;
}
#breadcrumbs a:hover{
background: #99db76;
}
#breadcrumbs a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #eef6f8 #eef6f8 #eef6f8 transparent;
left: -1em;
}
#breadcrumbs li:first-child a::before{
border-color:#eef6f8;
}
#breadcrumbs li.active > a::after{
border-left: 1em solid #00305e;
}
#breadcrumbs li.active:first-child > a::before{
border-color:#00305e;
}
#breadcrumbs a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #eef6f8;
right: -1em;
}
#breadcrumbs a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs .current,#breadcrumbs .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs .current::after,#breadcrumbs .current::before{
content: normal;
}
<head>
<style>
</style>
</head>
<body style="background-color:wheat">
<div class="crumbs-menu">
<ul id="breadcrumbs">
<li class="active"><a href="">Medical</a></li>
<li><a href="">Dental</a></li>
<li><a href="">Vision</a></li>
</ul>
</div>
</body>
解决方法
一个简单的阴影过滤器就可以在这里完成工作而无需更改代码:
#breadcrumbs {
overflow: hidden;
list-style: none;
margin-bottom: 0px;
}
#breadcrumbs li {
float: left;
margin: 0 .3em 0 1em;
font-size: 18px;
font-weight: 400;
letter-spacing: 1px;
}
#breadcrumbs a {
background: #eef6f8;
padding: .4em 1em;
float: left;
text-decoration: none;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,.5);
position: relative;
filter:drop-shadow(2px 0px 0px red); /* added (2px of red border) */
}
#breadcrumbs>li.active>a {
background: #00305e;
color: #fff;
}
#breadcrumbs a:hover {
background: #99db76;
}
#breadcrumbs a::before {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #eef6f8 #eef6f8 #eef6f8 transparent;
left: -1em;
}
#breadcrumbs li:first-child a::before {
border-color: #eef6f8;
}
#breadcrumbs li.active>a::after {
border-left: 1em solid #00305e;
}
#breadcrumbs li.active:first-child>a::before {
border-color: #00305e;
}
#breadcrumbs a:hover::before {
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs a::after {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #eef6f8;
right: -1em;
}
#breadcrumbs a:hover::after {
border-left-color: #99db76;
}
#breadcrumbs .current,#breadcrumbs .current:hover {
font-weight: bold;
background: none;
}
#breadcrumbs .current::after,#breadcrumbs .current::before {
content: normal;
}
<body style="background-color:wheat">
<div class="crumbs-menu">
<ul id="breadcrumbs">
<li class="active"><a href="">Medical</a></li>
<li><a href="">Dental</a></li>
<li><a href="">Vision</a></li>
</ul>
</div>
</body>
,
如果可以为右箭头添加一个额外的* fixed effects regression,with interaction of continuous and factor variable
xtreg ln_wage c.wks_ue##i.occ_code,fe
* investigate marginal effects of weeks worked last year
margins,dydx(wks_ue) at(occ_code = (1 2 3))
元素。我会这样做。
span
使用<ul id="breadcrumbs">
<li class="active">
<a href="">Medical</a>
<span class="right-arrow"></span>
</li>
<li>
<a href="">Dental</a>
<span class="right-arrow"></span>
</li>
<li>
<a href="">Vision</a>
<span class="right-arrow"></span>
</li>
</ul>
,我将为右箭头创建2种形状,并使用不同的颜色-一种形状将与面包屑的原色相匹配,另一种形状将用作边框效果。
在MDN docs上详细了解clip-path
。或者,如果您是视觉学习者,请玩here。
clip-path
#breadcrumbs li:not(.active) a:hover + .right-arrow {
--primary-color: #99db76;
}
.active .right-arrow {
--primary-color: #00305e;
--secondary-color: green;
}
.right-arrow {
--polygon: polygon(0 0,5px 0,100% 50%,5px 100%,0 100%);
--primary-color: #eef6f8;
--secondary-color: #00305e;
position: absolute;
top: 0;
right: -1em;
height: 100%;
width: 1em;
}
.right-arrow::after {
content: "";
height: inherit;
width: inherit;
position: absolute;
left: -3px;
background-color: var(--primary-color);
clip-path: var(--polygon);
}
.right-arrow::before {
content: "";
height: inherit;
width: inherit;
position: absolute;
background-color: var(--secondary-color);
clip-path: var(--polygon);
}
#breadcrumbs {
position: relative;
overflow: hidden;
width: 100%;
list-style: none;
margin-bottom: 0px;
}
#breadcrumbs li {
position: relative;
float: left;
margin: 0 0.3em 0 1em;
font-size: 18px;
font-weight: 400;
letter-spacing: 1px;
}
#breadcrumbs a {
background: #eef6f8;
padding: 0.4em 1em;
float: left;
text-decoration: none;
color: #000;
text-shadow: 0 1px 0 rgba(255,0.5);
position: relative;
}
#breadcrumbs>li.active>a {
background: #00305e;
color: #fff;
}
#breadcrumbs a:hover {
background: #99db76;
}
#breadcrumbs a::before {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #eef6f8 #eef6f8 #eef6f8 transparent;
left: -1em;
}
#breadcrumbs li:first-child a::before {
border-color: #eef6f8;
}
#breadcrumbs li.active>a::after {
border-left: 1em solid #00305e;
}
#breadcrumbs li.active:first-child>a::before {
border-color: #00305e;
}
#breadcrumbs a:hover::before {
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs li:not(.active) a:hover+.right-arrow {
--primary-color: #99db76;
}
.active .right-arrow {
--primary-color: #00305e;
--secondary-color: green;
}
.right-arrow {
--polygon: polygon(0 0,0 100%);
--primary-color: #eef6f8;
--secondary-color: #00305e;
position: absolute;
top: 0;
right: -1em;
height: 100%;
width: 1em;
}
.right-arrow::after {
content: "";
height: inherit;
width: inherit;
position: absolute;
left: -3px;
background-color: var(--primary-color);
clip-path: var(--polygon);
}
.right-arrow::before {
content: "";
height: inherit;
width: inherit;
position: absolute;
background-color: var(--secondary-color);
clip-path: var(--polygon);
}
#breadcrumbs a:hover::after {
border-left-color: #99db76;
}
#breadcrumbs .current,#breadcrumbs .current::before {
content: normal;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。