|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<strong>注意：background属性中的背景图片和颜色混合，只能在一个background属性中。</strong> 属性值： background-blend-mode: normal; //正常 background-blend-mode: multiply; //正片叠底 background-blend-mode: screen; //滤色 background-blend-mode: overlay; //叠加 background-blend-mode: darken; //变暗 background-blend-mode: lighten; //变亮 background-blend-mode: color-dodge; //颜色减淡 background-blend-mode: color-burn; //颜色加深 background-blend-mode: hard-light; //强光 background-blend-mode: soft-light; //柔光 background-blend-mode: difference; //差值 background-blend-mode: exclusion; //排除 background-blend-mode: hue; //色相 background-blend-mode: saturation; //饱和度 background-blend-mode: color; //颜色 background-blend-mode: luminosity; //亮度 background-blend-mode: initial; //初始 background-blend-mode: inherit; //继承 background-blend-mode: unset; //复原 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
无需背景图片就可以实现导航栏分割线，颜色自定，线段虚实自定。 .nav1{ width:auto; height:50px; text-align:center; margin:13px auto 0; } .nav1 a{ display: inline-block; text-decoration:none; } .nav1 a:hover{ color:#09109e; border:6px none #fff; font-weight:bold; } .nav1 li{ position:relative; } /*制作导航分隔线效果*/ .nav1 li::before, .nav1 li::after{ content:""; position:absolute; top:-5px; height: 40px; width: 1px; } .nav1 li::after{ right: 0; 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)); } .nav1 li::before{ left: 0; background: -moz-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9); background: -webkit-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9); background: -o-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9); background: -ms-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9); background: linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9); } /*删除导航第一个和最后一个分隔线*/ .nav1 li:first-child::before{ display: none; } .nav1 li:last-child::after{ display: none; } |