示例代码

<style>
  * {
    padding: 0;
    margin: 0;
  }
  ul {
    list-style: none;
    width: 600px;
    margin: auto;
  }
  li {
    padding: 10px;
    border: 10px solid pink;
    outline-offset: -10px;
  }
  li+li {
    margin-top: -10px;
  }
  li:hover {
    /* border:10px solid gold; */
    outline: 10px solid gold;
  }
</style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>

效果展示

  1. hover 设置 border
  2. hover 设置 outline
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于产品、设计、开发的问题和看法，还有技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程

了解更多

目录

  1. 1. 示例代码
  2. 2. 效果展示