欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css3选择器(上)

程序员文章站 2022-06-04 21:01:01
...
1、给导航加分割线,左右

.nav li::before,.nav li::after{

content:"";

position:absolute;

top:14px;

height:25px;

width:1px;

}

.nav li::before{

left:0;

background:-webkit-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

background:-moz-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

background:-o-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

background:-ms-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

background:linear-gradient(to bottom,#f06254,#ffffff,#f06254);

}

.nav li::after{

right:0;

background:-webkit-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

background:-moz-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

background:-o-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

background:-ms-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

background:linear-gradient(to bottom,#f06254,#bf554c,#f06254);

}

.nav li:first-child::before{ background:none;}

.nav li:last-child::after{ background:none;}

2

html代码:

我链接的是PDF文件

相关标签: css3选择器(上)