求助：带背景色与边框色的CSS Progress Bar及Tab Control实现方法

Hey John, let's break down how to build both the styled Tab Control and custom Progress Bar you're asking for. I'll share complete, customizable code snippets you can adapt to your project.

First, let's create a tab control with configurable background colors, borders, and active states. This uses semantic HTML, CSS for styling, and a tiny bit of JavaScript for tab switching.

HTML Structure #

We'll wrap the tab navigation and content in a container for easy styling:

<div class="tab-container">
  <!-- Tab Navigation Buttons -->
  <div class="tab-nav">
    <button class="tab-btn active">Profile</button>
    <button class="tab-btn">Settings</button>
    <button class="tab-btn">Notifications</button>
  </div>
  <!-- Tab Content Panes -->
  <div class="tab-content">
    <div class="tab-pane active">View and edit your personal profile details.</div>
    <div class="tab-pane">Manage account settings and preferences.</div>
    <div class="tab-pane">Control notification types and frequency.</div>
  </div>
</div>

CSS Styling #

This styles the tabs with default backgrounds, hover states, and a distinct active tab look:

/* Main container to group tabs and content */
.tab-container {
  width: 90%;
  max-width: 800px;
  margin: 2rem auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Tab navigation bar layout */
.tab-nav {
  display: flex;
  gap: 0.3rem;
  border-bottom: 2px solid #e5e7eb;
}

/* Default tab button style */
.tab-btn {
  background-color: #f3f4f6;
  border: 2px solid transparent;
  border-bottom: none;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 6px 6px 0 0;
  transition: all 0.2s ease-in-out;
}

/* Hover state for tabs */
.tab-btn:hover {
  background-color: #e5e7eb;
}

/* Active tab style (distinct background + border) */
.tab-btn.active {
  background-color: #ffffff;
  border-color: #3b82f6;
  color: #3b82f6;
  font-weight: 500;
}

/* Tab content area */
.tab-content {
  border: 2px solid #e5e7eb;
  border-top: none;
  padding: 1.5rem;
  border-radius: 0 0 6px 6px;
  background-color: #ffffff;
}

/* Hide inactive tab panes by default */
.tab-pane {
  display: none;
}

/* Show active tab pane */
.tab-pane.active {
  display: block;
}

JavaScript for Tab Switching #

Add this to make the tabs interactive:

// Get all tab buttons and content panes
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanes = document.querySelectorAll('.tab-pane');

tabButtons.forEach((button, index) => {
  button.addEventListener('click', () => {
    // Remove active state from all tabs and panes
    tabButtons.forEach(btn => btn.classList.remove('active'));
    tabPanes.forEach(pane => pane.classList.remove('active'));
    
    // Activate the clicked tab and its corresponding content
    button.classList.add('active');
    tabPanes[index].classList.add('active');
  });
});

Pro tip: Adjust the background-color, border-color, and color values to match your project's theme.

Next, let's build a progress bar with a custom background, border, and smooth animation for progress updates.

HTML Structure #

A simple container with a child element for the progress fill:

<div class="progress-container">
  <div class="progress-fill" style="width: 65%"></div>
</div>

CSS Styling #

This defines the container's border and background, plus the progress fill's style and animation:

/* Progress bar container */
.progress-container {
  width: 90%;
  max-width: 800px;
  margin: 2rem auto;
  height: 28px;
  border: 2px solid #d1d5db;
  border-radius: 14px;
  background-color: #f9fafb;
  overflow: hidden; /* Ensures progress fill doesn't spill outside the container */
}

/* Progress fill element */
.progress-fill {
  height: 100%;
  background-color: #10b981;
  border-radius: 12px; /* Slightly smaller than container to avoid border overlap */
  transition: width 0.4s ease; /* Smooth animation when progress changes */
}

Dynamic Progress Update (Optional) #

Use JavaScript to update the progress programmatically:

// Example: Update progress to 90% after 1.5 seconds
setTimeout(() => {
  document.querySelector('.progress-fill').style.width = '90%';
}, 1500);

Customization note: Change border-color, background-color (for both container and fill), and height to tweak the bar's appearance to your needs.

内容的提问来源于stack exchange，提问作者John Raj