CSS outline 卡片悬停效果

<html>
  <head>
    <meta charset="utf-8">
    <title>outline 卡片悬停效果</title>
    <style>
      .card {
        width: 250px;
        height: 150px;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        margin: 15px;
        display: inline-block;
        transition: all 0.3s ease;
      }
      
      .card:hover {
        outline: 3px solid #0066ff;
        outline-offset: 5px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      .card-title {
        font-size: 18px;