如何用HTML创建此类导航栏？border-img实现失败求帮助与代码

Hey there! I totally get the frustration with border-image—it works great for static, fixed-size elements, but navigation bars with variable-width items can be a real pain to get right with it. Let's skip that hassle and use a more flexible approach with plain HTML and CSS that's easier to tweak and maintain.

Step 1: Basic HTML Structure #

First, let's set up the core navbar markup using semantic elements for accessibility and clean structure:

<nav class="custom-navbar">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#services">Our Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Step 2: CSS Styling (The Magic Part) #

Now we'll style the navbar to get a polished, interactive look. We'll use flexbox for layout, custom borders, and hover states to make it user-friendly:

/* Reset default browser styles to start fresh */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.custom-navbar {
  background-color: #f8f9fa;
  padding: 0 1rem;
  border-bottom: 2px solid #dee2e6;
}

.custom-navbar ul {
  display: flex;
  list-style: none;
  gap: 0; /* Remove default spacing between list items */
}

.custom-navbar li a {
  display: block;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: #495057;
  border-right: 1px solid #dee2e6;
  transition: background-color 0.3s ease;
}

/* Remove border from the last menu item for a clean edge */
.custom-navbar li:last-child a {
  border-right: none;
}

/* Add hover effect for interactivity */
.custom-navbar li a:hover {
  background-color: #e9ecef;
  color: #212529;
}

Why This Works Better Than Border Image #

• Flexibility: This setup handles variable-width menu items seamlessly, which border-image struggles with because it relies on fixed image slices.
• Maintainability: No external image files needed—all styling lives in CSS, so you can tweak colors, padding, or borders in seconds.
• Responsiveness: You can easily add media queries to stack menu items on mobile without reworking image assets.

If you were aiming for a specific decorative border (like a patterned or gradient one), we could also use CSS gradients or pseudo-elements to replicate that without border-image. Just share the exact look you're going for, and I can adjust the code further!

内容的提问来源于stack exchange，提问作者arunoday singh