边框（border）和 text-decoration（css）

边框(border)

/*css*/
ul li {
      background-color: skyblue;
      padding: 10px;
      margin-bottom: 10px;
    }

    li:first-of-type {
      border-top: 2px solid #f00;
      /*实线*/
    }

    li:nth-child(2) {
      border-left: 2px double #f00;
      /*双线*/
    }

    li:nth-child(3) {
      border-right: 2px dotted #f00;
      /*点线*/
    }

    li:nth-child(4) {
      border-bottom: 2px dashed #f00;
      /*虚线*/
    }

    li:nth-child(5) {
      border-width: 2px;
      /*边框线宽度*/
      border-color: #f00;
      /*边框线颜色*/
      border-style: dotted dashed double;
      /*上 左右  下*/
    }

    li:nth-child(6) {
      border-width: 2px;
      /*边框线宽度*/
      border-color: #f00;
      /*边框线颜色*/
      border-style: solid dashed dotted double;
      /*上 右 下 左*/
    }

    li:nth-child(7) {
      border-width: 2px;
      /*边框线宽度*/
      border-color: #f00;
      /*边框线颜色*/
      border-style: dotted dashed;
      /*上下 左右*/
    }
    /*html*/
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

效果图：

text-decoration

/*css*/
    a:first-child {
      /*文字下方有线*/
      text-decoration: underline;
    }

    a:nth-child(2) {
      /* 文字下方有链接 */
      text-decoration: overline;
    }

    a:nth-child(3) {
      /* 中间的线 */
      text-decoration: line-through;
    }

    a:nth-child(4) {
      text-decoration: overline underline;
    }

    a:last-child {
      text-decoration: overline line-through underline;
    }
 /*html*/
  <a>1234</a>
  <a>1234</a>
  <a>1234</a>
  <a>1234</a>
  <a>1234</a>

效果图：