选择器里面什么意思，为什么设背景是只有这部分才有渐变？求大牛解答
来源：5-5 CSS3背景 制作导航菜单综合练习题
格砸3206448
2016-04-16 01:34
.nav li::before,
.nav li::after{
content:"";/*在li之间插入空内容*/
position:absolute;/*相对于li标签*/
/*定位分割线的位置大小*/
top:14px;
height: 25px;
width: 1px;
}
.nav li::after{
right: 0px;
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
}
写回答
关注
1回答
-
- 弹吉他的卡农
- 2016-04-16 14:48:31
只有部分渐变是因为.nav li::after里面设置了height 和width；
background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
意思是透明度为0的白色向上渐变为透明度为0.2的白色，再向上渐变为透明度为1的白色，其中中间临界点为50%；
十天精通CSS3
本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备
243145 学习 · 2677 问题
相似问题