TOP 3 CSS Border Gradient cực dễ làm

Ở bài viết này mình sẽ chia sẻ cho các bạn 3 cách làm border gradient trong CSS, không giới thiệu dài dòng, mình đi…

TOP 3 CSS Border Gradient cực dễ làm RealDev sẽ chia sẻ cho các bạn. Nào chúng ta cùng bắt đầu nhé. ^^

Chúng ta sẽ có HTML và CSS cơ bản như sau

<div class="boxed"></div>
.boxed{ width: 300px; height: 300px; background-color: black;}

Border image slice

Với cách này thì chúng ta sẽ sử dụng 2 thuộc tính trong CSS đó chính là border-image-sliceborder-image-source, cách này nhanh gọn lẹ nhất, tuy nhiên có một nhược điểm đó chính là không dùng được với border-radius(khi làm bo góc)

.boxed { width: 200px; height: 200px; border: 10px solid; border-image-slice: 1; border-image-source: linear-gradient(to right bottom, #6a5af9, #f62682);}

Chúng ta sẽ có kết quả như sau

Sử dụng border image để tạo border gradient

Dùng thêm thẻ con bên trong

Trường hợp này thì chúng ta sẽ dùng một trick đó chính là tạo background gradient cho .boxed bình thường, sau đó thêm padding tương ứng cho độ dày của border, và bên trong tạo thêm 1 thẻ html ví dụ là .boxed-child chẳng hạn và cho nó màu nền trùng với màu nền của body

<div class="boxed"> <div class="boxed-child"></div></div>
.boxed { width: 200px; height: 200px; background-image: linear-gradient(to right bottom, #6a5af9, #f62682); padding: 10px; border-radius: 10px;}.boxed-child { width: 100%; height: 100%; background-color: #191a28; border-radius: inherit;}

Chúng ta sẽ có kết quả như dưới đây kèm bo góc luôn, tuy nhiên cách làm này không hay, vì đôi khi chúng ta không được phép thêm HTML vào bên trong thì sao, vì thế sẽ có cách số 3 đó chính là sử dụng lớp giả :before hoặc :after để xử lý.

Sử dụng thêm thẻ html để tạo border gradient

Sử dụng before hoặc after

Nếu buộc phải có bo góc thì mình nghĩ dùng cách này là ổn áp nhất và chúng ta sẽ có code CSS như sau, các bạn chú ý những thuộc tính quan trọng đó chính là background-clip: padding-box và chỗ margin: -10px nó sẽ tương ứng cho border: 10px ví dụ border 20px thì margin sẽ là -20px nhé.

.boxed { width: 200px; height: 200px; position: relative; background-clip: padding-box; border: 10px solid transparent; background-color: #191a28; border-radius: 20px;}.boxed:before { content: ""; position: absolute; inset: 0; z-index: -1; margin: -10px; background-image: linear-gradient(to right top, #2979ff, #07a787); border-radius: inherit;}

Và đây là kết quả

Sử dụng before để tạo border gradient

Trên đây là 3 cách tạo border gradient trong CSS mà mình biết, hi vọng sẽ có ích cho các bạn nhé. Nếu các bạn tìm tòi được cách nào hay hơn thì chia sẻ dưới bình luận nhen.

5/5 - (3 Yêu thích)
Tuy-bien-scrollbar-trong-css CSS Scrollbar Tùy biến dễ dàng ai cũng làm đượcBạn đang xem: TOP 3 CSS Border Gradient cực dễ làmHTML toàn tập cho người mới | Phần 2 Html-co-ban-toan-tap-2HTML toàn tập cho người mới | Phần 3 Html-co-ban-toan-tap3Toàn tập với kiến thức CSS cơ bản dành cho người mới | Phần 1 Css-co-ban-p1
Trả lời

Click vào Comment nhanh ở dưới để chia sẻ suy nghĩ của Bạn.

Bài học thật sự hữu ích và cung cấp kiến thức giá trị.Tôi đã học được nhiều điều từ bài viết này.Chia sẻ kiến thức bổ ích, cảm ơn bạn.Cảm ơn bạn đã chia sẻ kinh nghiệm học tập này.Bài viết giúp tôi hiểu rõ hơn về chủ đề này.Giá trị của bài học thực sự đáng khen.Tôi đã học hỏi được nhiều từ bài viết của bạn.Cảm ơn bạn đã chia sẻ kiến thức quý báu này.Nội dung bài viết rất phù hợp với tình hình hiện tại.Tôi đánh giá cao sự cố gắng của bạn trong việc chia sẻ.Bài học rất hữu ích cho công việc của tôi.Cảm ơn bạn đã cung cấp kiến thức chất lượng này.Tôi đã học được điều mới mẻ từ bài viết của bạn.Bài học giúp tôi mở rộng kiến thức của mình.Cảm ơn bạn vì bài học thú vị này.

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đã Copy vào Bộ nhớ tạm