Hướng dẫn cắt góc css
|
Bo xéo 1 bên góc trong CSS Show Cho mình hỏi trong CSS có thuộc tính nào tạo góc bo xéo 1 bên giống như hình bên dưới không vậy các bạn ? (mình sửa lại chèn tấm hình cho vô cho nó rõ ý đồ của mình ) Bạn nào có chia sẽ về góc bo xéo thì trả lời giúp nhé! Thank's Ở 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 thẳng vào từng cách một luôn nhé ⚡️ Chúng ta sẽ có HTML và CSS cơ bản như sau .boxed{
width: 300px;
height: 300px;
background-color: black;
}Border image sliceVới cách này thì chúng ta sẽ sử dụng 2 thuộc tính trong CSS đó chính là .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 Dùng thêm thẻ con bên trongTrường hợp này thì chúng ta sẽ dùng một trick đó chính là tạo background gradient cho .boxed{
width: 300px;
height: 300px;
background-color: black;
}0 tương ứng cho độ dày của border, và bên trong tạo thêm 1 thẻ html ví dụ là .boxed{
width: 300px;
height: 300px;
background-color: black;
}1 chẳng hạn và cho nó màu nền trùng với màu nền của body.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 before hoặc afterNế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à .boxed{
width: 300px;
height: 300px;
background-color: black;
}2 và chỗ .boxed{
width: 300px;
height: 300px;
background-color: black;
}3 nó sẽ tương ứng cho .boxed{
width: 300px;
height: 300px;
background-color: black;
}4 ví dụ border 20px thì .boxed{
width: 300px;
height: 300px;
background-color: black;
}5 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ả 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. Có thể sử dụng các thuộc tính CSS về border để tạo ra các đường khung viền cho phần tử HTML, công cụ này giúp bạn phát sinh mã CSS Border nhanh với các tùy chọn như màu border, kiểu đường, kể cả tùy chọn các cạnh kẻ viền. Để hiểu về cú pháp bạn đọc phần dưới. Mã thuộc tính CSS phát sinh border: 1px solid #b1154a; Copy mã này cho vào phần tử (như css: class, id ..., phần tử html div, p, ...) muốn áp dụng Phần dưới đây là kiến thức lý thuyết về CSS border (đường viền) Đường viền border CSSĐể thêm đường viền cho phần tử HTML bạn sử dụng thuộc tính CSS có tên border, giá trị cho thuộc tính này bạn viết trên một dòng thể hiện tính chất đường viền mong muốn, gồm ba giá trị là size style color, cú pháp là: border: size style color; border: size style color;0 : độ dày đường viền (như 1px, 2em ...) border: size style color;1 : kiểu đường viền, nó nhận các giá trị như none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, hay dùng kiểu dotted - đường nét chấm chấm, dashed đường nét đứt, solid đường nét liền border: size style color;2 : mã màu của đường viền (xem mã màu trong HTML, CSS) hay tên các màu sắc như red, blue, green, black, white, yellow ... Như mã CSS tạo ra đường độ dày border: size style color;3, kiểu đường liền border: size style color;4, màu đường là đỏ border: size style color;5, thì bạn viết: border: 2px solid red; Ví dụ tạo lớp CSS có tên border: size style color;6 nó kẻ viền phần từ, độ dày đường 5px, đường có kiểu nét đứt (gạch gạch), màu xanh lá (green)
Kết quả: Trong cú pháp tạo đường viền border: size style color; Bạn có thể khai báo thiếu các thành phần, lúc này nó sẽ sử dụng giá trị mặc định, ví dụ vài trường hợp sau: Mã CSS đường viềnKết quảborder: node;Thiết lập sẽ không kẻ viền border: dashed #b1154a; Thiếu size, do vậy size lấy mặc định border: 1px dotted; Thiếu màu, do vậy lấy màu mặc định border-width, border-color, border-styleNgoài cách viết đường viền theo thuộc tính border: size style color;7 như trên, còn có thể sử dụng ba thuộc tính border: size style color;8, border: size style color;9, border: 2px solid red;0 để chỉ ra độ rộng, kiểu đường và màu sắc. Độ rộng đường là giá trị theo đơn vị px, em ... Màu sắc là các màu theo quy tắc CSS như màu theo tên, màu hash, màu RGB, rgba Kiểu đường nhận các giá trị: none, dotted, dashed, double, groove, ridge, inset, outset, hidden Ví dụ:
Không kẻ khung. Kiểu dotted. Kiểu dashed. Kiểu double. Kiểu grooved. Kiểu ridged. Kiểu inset. Kiểu outset. Ẩn kẻ khung (khung không kẻ nhưng độ rộng phần tử vẫn có khung). Đường viền theo từng cạnh boder-left (top, bottom, right)Cách viết ở phần trên tác động nên cả bốn cảnh của box, nếu muốn thiết lập cho từng cạnh của box bạn có thể sử dụng thêm thuộc tính. Thiết lập độ rộng, kiểu đường, màu sắc cho các thuộc tính: border: 2px solid red;1, border: 2px solid red;2, border: 2px solid red;3, border: 2px solid red;4
Ví dụ kể viền trên dưới Tương tự như border: 2px solid red;0, border: size style color;8, border: 2px solid red;7 bạn cũng định nghĩa từng tham số màu, độ rộng, kiểu đường một cách riêng biệt cho từng cạnh với, với các thuộc tính |
