Sử dụng hiệu ứng chuyển màu dạng hình nón để tạo đường viền thú vị
bookmark_borderbookmark
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Bạn có thể sử dụng hiệu ứng chuyển màu hình nón để tạo một số hiệu ứng thú vị, chẳng hạn như ví dụ về đường viền đẹp mắt này.
CodePen này do Adam
Argyle tạo ra, ban đầu được chia sẻ qua
thông báo này trên Twitter,
cho thấy cách sử dụng hiệu ứng chuyển màu hình nón để tạo đường viền.
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
Terry Mun đã творчески
tạo nhánh
codepen của Adam và tạo ra
CodePen này. Di chuột qua phần tử này và bạn sẽ thấy hiệu ứng chuyển màu thay đổi, nhờ một chút JavaScript cập nhật thuộc tính tuỳ chỉnh CSS lưu trữ góc xoay.
Các ví dụ này sử dụng thuộc tính border-image-source
. Thuộc tính này đặt hình ảnh nguồn dùng để tạo đường viền của một phần tử. Giống như các thuộc tính khác chấp nhận giá trị hình ảnh, mọi loại chuyển màu CSS cũng hợp lệ.
border-image-source
Chuyển màu hình nón
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2022-05-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2022-05-27 UTC."],[],[]]