image đường viền và đường viền Gradient trong CSS thuần túy
Đường viền trong CSS là tin cũ, nhưng có thể bạn không biết rằng hình ảnh đường viền và đường viền gradient cũng có thể thực hiện được với CSS hiện nay, nhờ vào hai thuộc tính: border-image-source và border-image-slice .
Hình ảnh viền
Bạn có thể sử dụng hình ảnh thay thế kiểu viền mặc định. Đây là một ví dụ đơn giản. Đầu tiên, đánh dấu của ta :
<div class="box box-1">Just a box! 😄</div>
Và sau đó là các kiểu cho hộp của ta :
.box {
width: 400px;
height: 200px;
max-width: 100%;
background: var(--bg2);
margin: 1rem auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.box-1 {
border: 20px solid;
border-image-source: url(/url/to/some/fancy/image.jpg);
border-image-slice: 60 30;
}
Bạn sẽ nhận thấy rằng vẫn cần phải có một đường viền thông thường được áp dụng cho phần tử vì hình ảnh đường viền thay thế kiểu đường viền thông thường.
border-image-source chỉ định hình ảnh nguồn, có thể là một URL đến một hình ảnh raster hoặc dựa trên vectơ (SVG) hoặc một URI dữ liệu.
border-image-slice cũng cần thiết để đạt được hiệu ứng mong muốn. Điều đó có thể hơi phức tạp để nắm bắt đầy đủ, nhưng ý chính của nó là đằng sau mức thấp , công cụ cắt hình ảnh thành lưới 3 X 3, với phần trung tâm là trong suốt theo mặc định. border-image-slice được sử dụng để chỉ định cách hình ảnh được phân phối trên lưới đó. Nó có thể mất đến 4 giá trị có thể là giá trị số hoặc giá trị phần trăm. Đây là một bài viết tham khảo tuyệt vời của Codrops và một bài khác của CSS-Tricks nếu bạn muốn mạo hiểm tìm hiểu đầy đủ về border-image-slice .
Thuộc tính ngắn gọn với hình ảnh đường viền
Có một thuộc tính viết tắt để chỉ định các giá trị cho cả border-image-source và border-image-slice cùng một lúc: border-image . Đây là ví dụ tương tự, nhưng sử dụng cách viết tắt:
.box-1 {
border: 20px solid;
border-image: url(/url/to/some/fancy/image.jpg) 60 30;
}
Đường viền Gradient
Vì gradient trong CSS thực sự là những hình ảnh được tạo nên việc tạo đường viền gradient đơn giản như sử dụng gradient tuyến tính , xuyên tâm hoặc hình nón thay cho nguồn hình ảnh thông thường.
Đầu tiên, một đường viền gradient tuyến tính:
.box-2 {
border: 10px solid;
border-image-source: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66));
border-image-slice: 1;
}
Như bạn sẽ thấy, việc cắt trên các gradient như vậy đơn giản hơn nhiều và giá trị đơn giản là 1 sẽ làm được. Vì vậy, bằng cách sử dụng ngắn gọn , ta nhận được:
.box-2 {
border: 10px solid;
border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
}
Đây là ví dụ tương tự, nhưng dưới dạng gradient xuyên tâm:
.box-3 {
border: 10px solid;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}
Và cuối cùng là một gradient conic cho phép đo tốt, ở đây với tất cả các màu của bánh xe màu để tạo ra một gradient cầu vồng:
.box-4 {
border: 10px solid;
border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
}
Còn về Bán kính Biên giới?
Rất tiếc, hình ảnh đường viền chưa thể có bán kính, vì vậy nếu bạn muốn phần tử của bạn có bán kính đường viền và đường viền gradient, bạn sẽ phải sử dụng một giải pháp thay thế có thể liên quan đến một phần tử HTML khác .
Hỗ trợ trình duyệt: Kể từ năm 2020, Tôi có thể sử dụng hình ảnh đường viền không? hiển thị 99% trình duyệt trên toàn thế giới hỗ trợ thuộc tính hình ảnh đường viền.
Các tin liên quan
Cắt image trong CSS với đối tượng phù hợp2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03
