導航分割線

.nav li{
    position:relative;
    display:inline-block;
    padding:0 16px;
    font-size: 13px;
    text-shadow:1px 2px 4px rgba(0,0,0,.5);
    list-style: none outside none;
  }

1.製作導航分隔線

.nav li{background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;}    

2.刪除第一個和最後一個導航分隔線

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

/刪除最後一個/

原理:使用背景顏色background漸變分別給每個li右側添加寬1px、高15px(如果該數值>li的高度,則超出部分隱藏)的背景色,看起來就是分隔線的效果
補充:no-repeat right / 1px 15px; 這幾個參數的意義:
  1:right爲背景色起始繪製位置,也就是從右邊開始;
  2:1px爲背景色繪製寬;
  3:15px爲背景色繪製高度;
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章