制作无左边框的线性渐变边框

问题描述 投票：0回答：1

如何实现制作带有自定义边框的按钮/链接？ （我希望右边框为红色，右侧的底部/顶部边框为红色，然后逐渐变暗/具有较低的

opacity
，然后左侧没有边框。这是几张照片我想，与当前的结果相比：

我想要什么：

目前的结果：

]

我已经去这些来源尝试寻找解决方案：

这是我现在拥有的：

/* Legal */
.legal-btn-container {
    max-width: 700px;
}

.legal-nav-btn {
    border: 1px solid;
    color: #ffffff;
    font-weight: 500;
    padding: 5px 10px;
    cursor: pointer;
    background-color: #222022;
    text-transform: uppercase;
    transition: background-color linear 0.25s, border-color linear 0.25s, linear 0.25s;
}

.legal-nav-btn:hover {
    border-color: #ff0000;
    color: #ff0000;
}

.legal-nav-btn:focus {
    border-color: #ff0000;
    color: #ff0000;
}

.active-legal-nav-btn {
    border-color: #ff0000;
    color: #ff0000;
}

.legal-btn-left {
    border-right: 1px solid;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px; 
}

.legal-btn-middle {
    border-radius: 0px;
}

.legal-btn-right {
    border-left: 1px solid;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.legal-title {
    padding-left: 15px;
    width: auto;
}

.legal-nav-link {
    border-right: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-left: none;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    color: #ffffff;
    cursor: pointer;
    background-color: #222022;
    transition: background-color linear 0.20s, border-color linear 0.20s, color linear 0.20s;
    text-decoration: none;
    margin-left: 8px;
    margin-right: 8px;
    padding: 8px 8px !important;
}

.legal-nav-link:hover {
    color: #ff0000;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Terms of Service</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"  integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
  <link href="../../assets/css/style.css" rel="stylesheet" type="text/css">
</head>

<body oncopy="return false" onpaste="return false" oncut="return false">
 
  
  
  
  <section>
  <div class="container text-center legal-btn-container">
    <div class="d-flex row gx-1 gy-1">
      <a href="terms.php" class="col-sm-4 btn legal-nav-btn legal-btn-left active-legal-nav-btn ">Term and Conditions</a>
      <a href="privacy.php" class="col-sm btn legal-nav-btn legal-btn-middle">Privacy Policy</a>
      <a href="return.php" class="col-sm btn legal-nav-btn legal-btn-middle">Return Policy</a>
      <a href="disclaimer.php" class="col-sm btn legal-nav-btn legal-btn-right">Disclaimer</a>
    </div>
  </div>

  <p class="italic mt-2 mb-2 pb-0 opacity-50 text-center">
    <i class="fa-regular fa-clock mr-1"></i> Terms of Service last updated 5-02-2024
  </p>

  <h2 class="pt-5 mb-n5 legal-title">Terms of Service:</h2>
  </section>

 <section> 
    <div class="row gx-0">
      <div class="col-4 border-top border-end border-secondary">
        <div style="position: sticky; top: 0vh;" id="simple-list-example" class="d-flex flex-column gap-3 legal-content text-end">
          <a class="py-1 pe-4 mt-5 rounded legal-nav-link" href="#legal-item-1">Item 1</a>
          <a class="py-1 pe-4 rounded legal-nav-link" href="#legal-item-2">Item 2</a>
          <a class="py-1 pe-4 rounded legal-nav-link" href="#legal-item-3">Item 3</a>
          <a class="py-1 pe-4 rounded legal-nav-link" href="#legal-item-4">Item 4</a>
          <a class="py-1 pe-4 rounded legal-nav-link" href="#legal-item-5">Item 5</a>
          <a class="py-1 pe-4 rounded legal-nav-link" href="#legal-item-6">Item 6</a>
          <a class="py-1 pe-4 rounded legal-nav-link" href="#legal-item-7">Item 7</a>
          <a class="py-1 pe-4 rounded legal-nav-link" href="#legal-item-8">Item 8</a>
          <a class="py-1 pe-4 rounded legal-nav-link" href="#legal-item-9">Item 9</a>
          <a class="py-1 pe-4 mb-5 rounded legal-nav-link" href="#legal-item-10">Item 10</a>
        </div>
      </div>
      <div class="col-8 border-top border-secondary p-5">
        <div data-bs-spy="scroll" data-bs-target="#legal-content" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
          <div class="legalbox pt-3" id="legal-item-1">
            <h3><a name="1">Placeholder</a></h3>
            <p class="pt-2">
             
            </p>
          </div>
          <div class="legalbox py-4" id="legal-item-2">
            <h3><a name="1">Placeholder</a></h3>
            <p class="pt-2">
              
            </p>
          </div>
          <div class="legalbox py-4" id="legal-item-3">
            <h3><a name="1">Placeholder</a></h3>
            <p class="pt-2">
              
            </p>
          </div>
          <div class="legalbox py-4" id="legal-item-4">
            <h3><a name="1">Placeholder</a></h3>
            <p class="pt-2">
              
            </p>
          </div>
          <div class="legalbox py-4" id="legal-item-5">
            <h3><a name="1">Placeholder</a></h3>
            <p class="pt-2">
            
            </p>
          </div>
          <div class="legalbox py-4" id="legal-item-6">
            <h3><a name="1">Placeholder</a></h3>
            <p class="pt-2">
              
            </p>
          </div>
          <div class="legalbox py-4" id="legal-item-7">
            <h3><a name="1">Placeholder</a></h3>
            <p class="pt-2">
             
            </p>
          </div>
          <div class="legalbox py-4" id="legal-item-8">
            <h3><a name="1">Placeholder</a></h3>
            <p class="pt-2">
              
            </p>
          </div>
          <div class="legalbox py-4" id="legal-item-9">
            <h3><a name="1">Placeholder</a></h3>
            <p class="pt-2">
             
            </p>
          </div>
          <div class="legalbox pt-4" id="legal-item-10">
            <h3><a name="1">Placeholder</a></h3>
            <p class="pt-2">
               
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer>
    <div class="card nl-form ms-auto me-auto">
    <h1>Subscribe to Our Newsletter</h1>
    <p class="nl-text">Stay updated with the latest news and promotions.</p>
    <form class="card-body nl-form" id="nlform" method="post" action="nl_subscribers.php">
        <input class="cbs-form form-control input-group-custom-field" type="email" name="email" placeholder="Enter your email" id="nl-email" required>
        <button class="btn btn1" id="nl-button" type="submit">Subscribe</button>
      </form>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-lg-4 pt-4">
          <h5 class="pb-2">
            CherryBerry <span class="text-red">Studios</span>
          </h5>

          <p class="pe-xl-5">
            Duis posuere accumsan neque eu tristique. Sed at enim ultrices, cursus ipsum id, mattis massa.
          </p>
        </div>


        <div class="col-md-6 col-lg-2 pt-4">
          <h5 class="pb-2">
            Quick Links
          </h5>

          <ul class="list-inline list1">
            <li>
              <a class="footer-link" href="index.html">
                Home
              </a>
            </li>
            <li>
              <a class="footer-link" href="about.html">
                About Us
              </a>
            </li>
            <li>
              <a class="footer-link" href="">
                Sign Up
              </a>
            </li>
          </ul>
        </div>
        <div class="col-md-6 col-lg-2 pt-4">
          <h5 class="pb-2">
            Quick Links
          </h5>

          <ul class="list-inline list1">
            <li>
              <a class="footer-link" href="index.html">
                Home
              </a>
            </li>
            <li>
              <a class="footer-link" href="about.html">
                About Us
              </a>
            </li>
            <li>
              <a class="footer-link" href="">
                Sign Up
              </a>
            </li>
          </ul>
        </div>
        <div class="col-md-6 col-lg-4 pt-4">
          <h5 class="pb-2">
            Contact Us
          </h5>

          <ul class="list-inline list1">
            <li>
              <a class="footer-link" href="mailto:[email protected]">
                <i class="far fa-envelope"></i>
                [email protected]
              </a>
            </li>

          </ul>


          <ul class="list-inline  social-list2">
            <li class="list-inline-item">
              <a href="">
                <i class="fab fa-facebook-f"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="">
                <i class="fab fa-twitter"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="">
                <i class="fab fa-youtube"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="">
                <i class="fab fa-instagram"></i>
              </a>
            </li>
          </ul>

        </div>
      </div>
    </div>
  </footer>
  <div class="copyrights text-center p-3">
    <p class="m-0">
      ©2023 - CherryBerry Studios - All rights reserved.
    </p>
  </div>

    <div id="disclaimer" class="dis-popup">
        <p class="dis-text">This website uses cookies and collects diagnostic data to improve your browsing experience. By continuing to use this site, you consent to the use of cookies and data collection. For more details, please refer to our <a class="gray text-links" href="privacy.html">Privacy Policy</a>.</p>
        <button class="btn btn1 dis-btn" id="acceptButton">Accept & Continue</button>
    </div>

  <div class="loading-screen">
    <div class="loading-spinner-container">
        <img src="../../assets/images/logo-l.png" alt="Logo" class="ld-img">
        <div class="loading-spinner"></div>
    </div>
    <h1>Please Wait...</h1>
  </div>

  <!-- Sign Up Modal -->
  <div class="modal fade signup-modal" id="signupModal" tabindex="-1" aria-labelledby="signupModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content rounded-4 signup-modal-background">
        <div class="modal-header p-5 pt-4 pb-0 border-bottom-0">
          <div class="btn-group w-100 h-100">
            <a href="#" class="btn signup-modal-nav-btn active-modal-nav-btn" aria-current="page">Register</a>
            <a href="#" class="btn signup-modal-nav-btn" data-bs-target="#signinModal" data-bs-toggle="modal">Sign In</a>
          </div>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <hr>
        <div class="modal-header p-5 pt-0 pb-0 border-bottom-0">
          <h2 class="fw-bold mb-0 fs-2 text-center">Register your Account</h2>
        </div>
        <div class="modal-header p-5 pb-0 pt-1 border-bottom-0">
          <h5 class="fw-normal mb-0 text-center">Lets get started with your account</h5>
        </div>
        <hr>
        <div class="modal-body p-5 pt-0 pb-0">
          <form class="register-form" novalidate>
            <div class="form-floating mb-3">
  <input type="text" class="form-control rounded-3 cbs-form" id="registerUsernameInput"
    placeholder="" autocomplete="on" required>
  <label class="form-label" for="registerUsernameInput">Username</label>
  <div class="invalid-feedback r-username-invalid">You must enter a valid username</div>
  <div class="valid-feedback r-username-valid">Looks Good!</div>
</div>
            <div class="form-floating mb-3">
              <input type="email" class="form-control rounded-3 cbs-form" id="registerEmailInput"
                placeholder="" autocomplete="on" required>
              <label class="form-label" for="registerEmailInput">Email address</label>
              <div class="invalid-feedback r-email-invalid">You must enter a valid email</div>
              <div class="valid-feedback r-email-valid">Looks Good!</div>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control rounded-3 cbs-form" placeholder=""
                id="registerPasswordInput" autocomplete="on" required>
              <label class="form-label" for="registerPasswordInput">Password</label>
              <div class="invalid-feedback r-password-invalid">You must enter a password</div>
              <div class="valid-feedback r-password-valid">Looks Good!</div>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control rounded-3 cbs-form" placeholder=""
                id="registerConfirmPasswordInput" autocomplete="on" required>
              <label class="form-label" for="registerConfirmPasswordInput">Confirm Password</label>
             <div class="invalid-feedback r-password-confirm-invalid">You must enter your password again</div>
              <div class="valid-feedback r-password-confirm-valid">Looks Good!</div>
            </div>
            <input type="checkbox" id="agreementCheckbox" name="Agreement Checkbox" required>
            <label class="text-center d-inline" for="agreementCheckbox"><span>I agree to the <a
                  class="gray text-links tooltip-test" data-bs-toggle="tooltip" data-bs-custom-class="cbs-tooltip"
                  data-bs-title="Go to the Terms and Conditions"
                  href="https://www.termsfeed.com/live/7f2a7964-ad07-4450-9cc5-b4435160db61" target="_blank">Terms and
                  Conditions</a> and <a class="gray text-links tooltip-test" data-bs-toggle="tooltip"
                  data-bs-custom-class="cbs-tooltip" data-bs-title="Go to the Privacy Policy"
                  href="https://www.termsfeed.com/live/51c49715-5a49-477f-aa7b-d431b74dde6c" target="_blank">Privacy
                  Policy</a></span></label>
             <div class="invalid-feedback r-terms-checkbox-invalid">You must agree to the Terms and Conditions and Privacy Policy.</div>
            <button class="w-100 mb-3 mt-2 btn btn-lg rounded-3 btn1" type="submit">Next</button>
          </form>
        </div>
        <div class="modal-footer p-5 pt-1 pb-2">
          <h2 class="fs-5 fw-bold mb-3 text-center pb-0">Use a third-party to create your account.</h2>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Sign In Modal -->
  <div class="modal fade signup-modal" id="signinModal" tabindex="-1" aria-labelledby="signinModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content rounded-4 signup-modal-background">
        <div class="modal-header p-5 pt-4 pb-0 border-bottom-0">
          <div class="btn-group w-100 h-100">
            <a href="#" class="btn signup-modal-nav-btn" data-bs-target="#signupModal" data-bs-toggle="modal">Register</a>
            <a href="#" class="btn signup-modal-nav-btn active-modal-nav-btn" aria-current="page">Sign In</a>
          </div>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <hr>
        <div class="modal-header p-5 pt-0 pb-0 border-bottom-0">
          <h2 class="fw-bold mb-0 fs-2 text-center">Sign in to your account</h2>
        </div>
        <div class="modal-header p-5 pb-0 pt-1 border-bottom-0">
          <h5 class="fw-normal mb-0 text-center">Let's get signed in to your account</h5>
        </div>
        <hr>
        <div class="modal-body p-5 pt-0 pb-0">
          <form class="signup-form" novalidate>
            <div class="form-floating mb-3">
              <input type="text" class="form-control rounded-3 cbs-form" placeholder=""
                id="signinUsernameInput" autocomplete="on" required>
              <label class="form-label" for="signinUsernameInput">Username</label>
             <div class="invalid-feedback s-username-invalid">You must enter a username</div>
              <div class="valid-feedback s-username-valid">Looks Good!</div>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control rounded-3 cbs-form input-group-custom-field" placeholder=""
                id="signinPasswordInput" autocomplete="on" required>
              <label class="form-label" for="signinPasswordInput">Password</label>
             <div class="invalid-feedback s-password-invalid">You must enter your password</div>
              <div class="valid-feedback s-password-valid">Looks Good!</div>
            </div>
            <input class="m-0" type="checkbox" id="rem-checkbox">
            <label class="p-0 m-0 mb-3" for="rem-checkbox">Remember Me</label>
            <button class="w-100 mb-3 btn btn-lg rounded-3 btn1" type="submit">Sign In</button>
<p class="text-center mb-3">
                      Forgot Password? <a href="#" class="gray text-links" data-bs-target="#resetPasswordModal" data-bs-toggle="modal">Reset Password</a>
                    </p>
          </form>
        </div>
        <div class="modal-footer p-5 pt-1 pb-2">
          <h2 class="fs-5 fw-bold mb-3 text-center pb-0">Use a third-party to login to your account.</h2>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
        </div>
      </div>
    </div>
  </div>

<!-- Reset Password Modal -->
  <div class="modal fade signup-modal" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content rounded-4 signup-modal-background">
        <div class="modal-header p-5 pt-0 pb-0 border-bottom-0">
<button type="button" class="btn-close btn-close-white mt-3" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <hr>
        <div class="modal-header p-5 pt-0 pb-0 border-bottom-0 end-50">
          <h2 class="fw-bold mb-0 fs-2 text-center">Reset Your Password</h2>
        </div>
        <div class="modal-header p-5 pb-0 pt-1 border-bottom-0">
          <h5 class="fw-normal mb-0 text-center">Let's get a new password set up for your account</h5>
        </div>
        <hr>
        <div class="modal-body p-5 pt-0 pb-0">
          <form class="reset-password-email-form" novalidate>
            <div class="form-floating mb-3">
              <input type="email" class="form-control rounded-3 cbs-form" placeholder=""
                id="rpEmailInput" autocomplete="on" required>
              <label class="form-label" for="rpEmailInput">Email</label>
             <div class="invalid-feedback rp-email-invalid">You must enter a valid email</div>
              <div class="valid-feedback rp-email-valid">Looks Good!</div>
            </div>
            <div class="form-floating mb-3">
            </div>

            <button class="w-100 mb-3 btn btn-lg rounded-3 btn1" type="submit">Next</button>
          </form>
          <div class="modal-footer p-2 pt-1 pb-2">
         <div class="overflow-auto w-100 text-center" style="height:100px;">
          <p>Resetting your password will update your login credentials. Your username will remain the same, but your password will change. Please ensure you have access to the provided email address for password reset purposes. For assistance, contact support.</p>
         </div>
        </div>
       </div>
      </div>
    </div>
  </div>

  <button onclick="topFunction()" class="scroll-btn btn btn1" type="button" title="Scroll to top of page" id="scrollBtn"><i
      class="fa-solid fa-arrow-up fa-2xl"></i></button>

  <!-- scripts -->
  <script src="../../assets/js/core.js"></script>
  <script src="https://kit.fontawesome.com/3e4bc98475.js" crossorigin="anonymous"></script>
  <script src="../../assets/js/legal.js"></script>

  
</body>

</html>

以下是我尝试过的一些代码片段：

.legal-nav-link {
    position: relative;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    color: #ffffff;
    cursor: pointer;
    background-color: #222022;
    transition: background-color linear 0.20s, color linear 0.20s;
    text-decoration: none;
    margin-left: 8px;
    margin-right: 8px;
    padding: 8px 8px !important;
}

.legal-nav-link:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-right: 1px solid transparent;
    border-image: linear-gradient(to left, red, yellow);
    border-image-slice: 1;
    width: 1px;
}

.legal-nav-link:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to left, red, yellow);
    border-image-slice: 1;
    height: 1px;
}

.legal-nav-link:hover {
    color: #ff0000;
}
<div class="nav-container">
    <a href="#" class="legal-nav-link">Link 1</a>
    <a href="#" class="legal-nav-link">Link 2</a>
    <a href="#" class="legal-nav-link">Link 3</a>
</div>

.legal-nav-link {
    position: relative;
    color: #ffffff;
    cursor: pointer;
    background-color: #222022;
    transition: background-color linear 0.20s, color linear 0.20s;
    text-decoration: none;
    margin-left: 8px;
    margin-right: 8px;
    padding: 8px 8px !important;
}

.legal-nav-link:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect fill="url(#gradient)" x="0" y="0" width="100%" height="100%"/></svg>');
    background-repeat: no-repeat;
    background-size: 1px 100%;
    width: 1px;
}

.legal-nav-link:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect fill="url(#gradient)" x="0" y="0" width="100%" height="100%"/></svg>');
    background-repeat: no-repeat;
    background-size: 100% 1px;
    height: 1px;
}

.legal-nav-link:hover {
    color: #ff0000;
}
<div class="legal-nav-link">
    <svg width="0" height="0">
        <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:red; stop-opacity:1" />
            <stop offset="100%" style="stop-color:yellow; stop-opacity:1" />
        </linearGradient>
    </svg>
    Link Text
</div>

这些都不能解决我的问题，而且我发现它特别难以完成，因为只有顶部、右侧和底部边框，没有左侧边框。任何帮助表示赞赏！预先感谢！

html css
1个回答
0
投票

作为一个想法，您可以使用后面带有线性渐变背景的矩形：

body {
  background-color: #eee;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-item {
  position: relative;
  padding: 20px;
  text-align: right;
  background-color: #000;
  border-radius: 10px;
  color: #fff;
}

.list-item:not(:last-child) {
  margin-bottom: 8px;
}

.list-item::before {
  content: '';
  position: absolute;
  right: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 10px;
  background-image: linear-gradient(to left, red, rgba(255, 0, 0, 0));
  z-index: -1;
}
<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 1</li>
</ul>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.