Nơi có mọi thứ về chính sách tiktok video ngắn

Để tạo một viền trắng bên trong box, bạn có thể sử dụng thuộc tính box-shadow hoặc padding kết hợp với background-clip. Dưới đây là hai cách thực hiện:

Cách 1: Sử dụng box-shadow

Thêm một viền trắng bên trong bằng cách tạo hiệu ứng inset trong box-shadow:

article.post.type-post {
  position: relative;
  inset: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 128, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 10px;
  box-shadow: inset 0 0 0 5px white; /* Viền trắng bên trong */
}

• Giải thích:
  • inset tạo viền bên trong box.
  • 5px là độ dày của viền, bạn có thể điều chỉnh theo ý muốn.

Cách 2: Sử dụng padding và background-clip

Đặt một lớp nền trắng bên trong box bằng cách sử dụng padding:

article.post.type-post {
  position: relative;
  inset: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 128, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 10px;
  padding: 10px; /* Tạo khoảng trắng bên trong */
  background-clip: content-box; /* Giới hạn nền trong nội dung */
  border: 5px solid white; /* Viền trắng rõ nét */
}

• Giải thích:
  • padding tạo khoảng cách giữa viền và nội dung.
  • background-clip: content-box đảm bảo nền chỉ áp dụng trong vùng nội dung, không bao gồm viền.

So sánh hai cách:

• Cách 1 phù hợp nếu bạn chỉ muốn viền trắng đơn giản, không thay đổi kích thước nội dung.
• Cách 2 phù hợp khi cần khoảng cách giữa nội dung và viền.

Bạn có thể chọn cách nào phù hợp nhất với yêu cầu thiết kế của mình! 😊