Các đường viền chuyển màu trong CSS rất phức tạp, vì chúng ta cần tận dụng thuộc tính border-image
. Nó không phải là một tài sản siêu nổi tiếng và đi kèm với một số lưu ý
Tuy nhiên, hãy thử xem
Trước tiên, chúng tôi sẽ tạo một div duy nhất trong thiết lập HTML của chúng tôi
Hãy cung cấp cho div này một chiều rộng và chiều cao lớn để chúng ta có một bản demo tốt
div {
width: 50vmin;
height: 50vmin;
border: 1rem solid;
}
Điều này sẽ tạo một div bằng một nửa chiều rộng của chế độ xem của chúng tôi. Và cung cấp cho div này một đường viền 1rem
Điều tiếp theo chúng tôi muốn thêm là hình ảnh đường viền thực tế. Chúng tôi có thể chuyển một hình ảnh thực tế hoặc đặt SVG hoặc độ dốc khi điều này được hiển thị dưới dạng hình ảnh
div {
width: 50vmin;
height: 50vmin;
border: 1rem solid;
border-image: linear-gradient[0deg, #12c2e9, #c471ed, #f64f59] 1;
}
Bây giờ chúng ta sẽ có thiết lập đường viền cơ bản, trông giống như thế này
Tác giả
- uiswarup
- 6 Tháng Tám, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
CSS Hoạt ảnh Đường viền
Hoạt hình viền CSS thuần túy
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. khởi động. css
Tác giả
- vui vẻ
- 24 Tháng Tư, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
đường viền sọc
Hiệu ứng đường viền sọc chéo trong CSS thuần túy
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. không
Phụ thuộc. -
Tác giả
- Danny Joris
- 10 Tháng Tư, 2018
liên kết
- bản demo và mã
Làm với
- HTML [Pug] / CSS [SCSS]
Về mã
Hoạt hình đường viền chỉ CSS
Hoạt hình đường viền chỉ CSS khi di chuột. Nó cần một nền tảng vững chắc để làm việc
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Thomas Vaeth
- 05 Tháng Bảy, 2017
liên kết
- bản demo và mã
Làm với
- HTML/CSS [SCSS]
Về mã
Mixin đường viền nút
Một mixin Sass cho hoạt ảnh liên kết trong đó đường viền trượt xung quanh liên kết khi di chuột
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Ben Sheppard
- 12 Tháng Giêng, 2017
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
Vẽ viền từ trung tâm
Vẽ đường viền từ giữa hộp bằng các phần tử giả
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- paolo cavana
- 27 Tháng Bảy, 2016
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
Bố cục đường viền và hoạt ảnh
Hiển thị bố cục đường viền so le mà không cần dùng đến các phần tử trống và thay vào đó sử dụng nhiều nền