Làm thế nào để tạo hiệu ứng viền biên với CSS

Đường viền trang trí có thể tô điểm cho bất kỳ yếu tố nào trên trang, nhưng đường viền CSS bị giới hạn khi nói đến kiểu dáng. Các nhà phát triển thường đưa ra các giải pháp như viền CSS, viền SVG, nhiều viền và nhiều thứ khác để bắt chước và nâng cấp giao diện của viền hộp và hình động của nó.

Hôm nay chúng ta sẽ xem xét một bản hack đơn giản hơn cho các đường viền nét đứt: hoạt hình viền nét đứt. Đường viền nét đứt hoạt hình sẽ chỉ được tạo bằng cách sử dụng đề cương và bóng hộp, không để lại ồn ào về dự phòng, kể từ khi đề cương được hỗ trợ từ IE8 trở đi. Bằng cách đó, người dùng vẫn có thể thấy các đường viền không giống như khi sử dụng SVG hoặc gradient. Với điều này, bạn cũng có thể tạo ra các dấu gạch ngang hai màu. Chúng ta hãy xem.

Tạo Biên giới

Trước tiên chúng ta sẽ tạo đường viền. Đối với điều này, chúng tôi sẽ sử dụng một phác thảo nét đứt và bóng hộp.

 .biểu ngữ phác thảo: 6px nét đứt màu vàng; hộp bóng: 0 0 0 6px # EA3556; Lỗi 

Các đề cương sẽ cần tất cả các giá trị của nó; chiều rộng, loại và màu sắc. Các bóng hộp chỉ cần giá trị cho Lan tràn mà nên giống như chiều rộng của phác thảo và màu sắc của nó. Cả phác thảo và bóng hộp với nhau sẽ tạo ra hiệu ứng của dấu gạch ngang hai màu.

Sau đó, bạn có thể điều chỉnh chiều rộng hoặc chiều cao của hộp cho đường viền mong muốn của mình ở các góc.

Hoạt hình Biên giới

Đối với ví dụ hoạt hình đầu tiên của chúng tôi, chúng tôi sẽ thêm hoạt hình keyframe CSS vào một tập hợp các biểu ngữ với các đường viền hoạt hình liên tục, thu hút sự chú ý. Để có hiệu ứng hoạt hình, chúng ta chỉ cần hoán đổi màu của viền ngoài và bóng hộp.

@keyframes animateBorder đến phác thảo màu: # EA3556; hộp bóng: 0 0 0 6px màu vàng; 

Bạn có thể nhắm mục tiêu màu của phác thảo bằng cách sử dụng màu phác thảo thuộc tính lâu năm, tuy nhiên đối với bóng hộp, bạn sẽ phải cung cấp tất cả các giá trị cho thuộc tính tốc ký bây giờ.

Khi hình ảnh động đã sẵn sàng, hãy thêm nó vào hộp.

.biểu ngữ phác thảo: 6px nét đứt màu vàng; hộp bóng: 0 0 0 6px # EA3556; hoạt hình: 1s animateBorder vô hạn; khác

Chuyển tiếp trên biên giới

Đối với ví dụ chuyển đổi, chúng tôi sẽ thêm viền vào hình ảnh và tạo hiệu ứng cho hình ảnh khi di chuột. Bạn cũng có thể thay đổi kích thước đường viền cho các hiệu ứng khác nhau.

.ảnh phác thảo: 20px nét đứt # 006DB5; hộp bóng: 0px 0px 0px 20px # 3CFDD3; quá trình chuyển đổi: tất cả 1s; khác .photos: hover phác thảo-màu: # 3CFDD3; hộp bóng: 0 0 0 20px # 006DB5; 

Bây giờ, di chuột qua những hình ảnh này để thấy đường viền nét đứt CSS của bạn trong tất cả vinh quang hoạt hình của nó.

Và đó là một bọc. Bạn có thể thử thay thế các đường viền nét đứt bằng các đường chấm chấm, nhưng hiệu quả có thể không tốt. Bạn cũng có thể thay đổi loại phác thảo trong khi hoạt hình để có thêm một vài hiệu ứng.