CSS: đường viền. Giới hạn phần tử
Thuộc tính bán kính đường viền không áp dụng cho các thành phần bảng khi có đường viền chung hoặc riêng biệt."> border-collapse là thu gọn .
Ghi chú: Giống như bất kỳ thuộc tính viết tắt nào, các thuộc tính phụ riêng lẻ không thể kế thừa, chẳng hạn như trong border-radius:0 0 kế thừa, điều này sẽ ghi đè một phần các định nghĩa hiện có. Thay vào đó, các thuộc tính dài hạn riêng lẻ phải được sử dụng.
Cú pháp
/* Cú pháp của bán kính đầu tiên cho phép từ một đến bốn giá trị *//* Bán kính được đặt cho cả 4 cạnh */ border-radius: 10px; /* trên cùng bên trái và dưới cùng bên phải | trên cùng bên phải và dưới cùng bên trái*/ bán kính đường viền: 10px 5%; /* trên cùng bên trái | trên cùng bên phải và dưới cùng bên trái | góc phải ở phía dưới*/ bán kính đường viền: 2px 4px 2px; /* trên cùng bên trái | trên cùng bên phải | góc phải ở phía dưới | dưới cùng bên trái*/ bán kính đường viền: 1px 0 3px 4px; /* Cú pháp của bán kính thứ hai cho phép từ một đến bốn giá trị*/ /* (giá trị bán kính đầu tiên) / bán kính*/ bán kính đường viền: 10px 5% / 20px; /* (giá trị bán kính đầu tiên) / trên cùng bên trái và dưới cùng bên phải | trên cùng bên phải và dưới cùng bên trái*/ bán kính đường viền: 10px 5% / 20px 30px; /* (giá trị bán kính đầu tiên) / trên cùng bên trái | trên cùng bên phải và dưới cùng bên trái | góc phải ở phía dưới*/ bán kính đường viền: 10px 5px 2em / 20px 25px 30%; /* (giá trị bán kính đầu tiên) / trên cùng bên trái | trên cùng bên phải | góc phải ở phía dưới | dưới cùng bên trái*/ bán kính đường viền: 10px 5% / 20px 25em 30px 35em; /* Giá trị toàn cục */ bán kính đường viền: kế thừa; bán kính đường viền: ban đầu; bán kính đường viền: không đặt;Thuộc tính bán kính đường viền được chỉ định là:
- một, hai, ba hoặc bốn kiểu dữ liệu CSS biểu thị giá trị khoảng cách. Độ dài có thể được sử dụng trong nhiều thuộc tính CSS, chẳng hạn như chiều rộng, chiều cao, lề, phần đệm, chiều rộng đường viền, cỡ chữ và bóng văn bản.">
hoặc kiểu dữ liệu CSS đại diện cho một giá trị phần trăm. Nó thường được sử dụng để xác định kích thước tương ứng với đối tượng cha của một phần tử. Nhiều thuộc tính có thể sử dụng tỷ lệ phần trăm như phần đệm lề chiều cao chiều rộng và cỡ chữ.> các giá trị. Điều này được sử dụng để thiết lập một bán kính duy nhất cho các góc. - theo sau tùy chọn là "/" và một, hai, ba hoặc bốn
hoặc Giá trị. Điều này được sử dụng để đặt bán kính bổ sung, do đó bạn có thể có các góc hình elip.
Giá trị
| bán kính | Là kiểu dữ liệu CSS đại diện cho một giá trị khoảng cách. Độ dài có thể được sử dụng trong nhiều thuộc tính CSS, chẳng hạn như chiều rộng, chiều cao, lề, phần đệm, chiều rộng đường viền, cỡ chữ và bóng văn bản."> |
|
| trên cùng bên trái và dưới cùng bên phải | Là kiểu dữ liệu CSS đại diện cho một giá trị khoảng cách. Độ dài có thể được sử dụng trong nhiều thuộc tính CSS, chẳng hạn như chiều rộng, chiều cao, lề, phần đệm, chiều rộng đường viền, cỡ chữ và bóng văn bản."> |
|
| trên cùng bên phải và dưới cùng bên trái | Là kiểu dữ liệu CSS đại diện cho một giá trị khoảng cách. Độ dài có thể được sử dụng trong nhiều thuộc tính CSS, chẳng hạn như chiều rộng, chiều cao, lề, phần đệm, chiều rộng đường viền, cỡ chữ và bóng văn bản."> |
|
| trên cùng bên trái | Là kiểu dữ liệu CSS đại diện cho một giá trị khoảng cách. Độ dài có thể được sử dụng trong nhiều thuộc tính CSS, chẳng hạn như chiều rộng, chiều cao, lề, phần đệm, chiều rộng đường viền, cỡ chữ và bóng văn bản."> |
|
| trên cùng bên phải | Là kiểu dữ liệu CSS đại diện cho một giá trị khoảng cách. Độ dài có thể được sử dụng trong nhiều thuộc tính CSS, chẳng hạn như chiều rộng, chiều cao, lề, phần đệm, chiều rộng đường viền, cỡ chữ và bóng văn bản."> |
|
| góc phải ở phía dưới | Là kiểu dữ liệu CSS đại diện cho một giá trị khoảng cách. Độ dài có thể được sử dụng trong nhiều thuộc tính CSS, chẳng hạn như chiều rộng, chiều cao, lề, phần đệm, chiều rộng đường viền, cỡ chữ và bóng văn bản."> |
|
| dưới cùng bên trái | Là kiểu dữ liệu CSS đại diện cho một giá trị khoảng cách. Độ dài có thể được sử dụng trong nhiều thuộc tính CSS, chẳng hạn như chiều rộng, chiều cao, lề, phần đệm, chiều rộng đường viền, cỡ chữ và bóng văn bản."> |
Bán kính viền: 1em/5em; /* ... tương đương với: */ bán kính viền trên cùng bên trái: 1em 5em; bán kính đường viền trên cùng bên phải: 1em 5em; bán kính viền dưới bên phải: 1em 5em; bán kính viền dưới bên trái: 1em 5em; bán kính đường viền: 4px 3px 6px / 2px 4px; /* ... tương đương với: */ border-top-left-radius: 4px 2px; bán kính đường viền trên cùng bên phải: 3px 4px; bán kính đường viền dưới cùng bên phải: 6px 2px; bán kính viền dưới bên trái: 3px 4px;
Cú pháp chính thức
1,4 / 1,4Ở đâu Bảng tương thích trong trang này được tạo từ dữ liệu có cấu trúc. Nếu bạn muốn đóng góp vào dữ liệu, vui lòng xem https://github.com/mdn/browser-compat-data và gửi cho chúng tôi yêu cầu kéo. Cập nhật dữ liệu tương thích trên GitHub Ghi chú
Ghi chú
Tiền tố
Ghi chú
Ghi chú
Tiền tố
Ghi chú
Ghi chú
Ghi chú
Ghi chú
Tiền tố
Tiền tố
Tiền tố
Ghi chú
Ghi chú
Ghi chú
Ghi chú
Ghi chú
Ghi chú
Ghi chú
Ghi chú
Để kiểm soát đường viền của một phần tử, hãy sử dụng thuộc tính đường viền chung. Thuộc tính này cho phép bạn đặt độ dày, kiểu dáng và màu sắc của đường viền của một phần tử trong một khai báo. Ba thuộc tính này (độ dày đường viền, kiểu đường viền và màu sắc) có thể được đặt trong một khai báo. Đây là một ví dụ:
Ví dụ
đường viền: liền khối 10px; /* đường viền sẽ cong thành chữ "D" */ bán kính đường viền: 10px 40px 40px 10px; viền: rãnh 1em màu đỏ; bán kính đường viền: 2em; nền: vàng; viền: sườn vàng; bán kính đường viền: 13em/3em; đường viền: không có; bán kính đường viền: 40px 10px; đường viền: không có; bán kính đường viền: 50%; đường viền: chấm; chiều rộng đường viền: 10px 4px; bán kính đường viền: 10px 40px; đường viền: nét đứt; chiều rộng đường viền: 2px 4px; bán kính đường viền: 40px; Mẫu sống
Thông số kỹ thuật
Sự chỉ rõ
Trạng thái
Bình luận
Mô-đun nền và đường viền CSS cấp 3
Định nghĩa về "bán kính đường viền" trong thông số kỹ thuật đó.Đề xuất ứng viên
Định nghĩa ban đầu
Giá trị ban đầu Áp dụng cho tất cả các yếu tố; nhưng Tác nhân người dùng không bắt buộc phải áp dụng cho các thành phần bảng và bảng nội tuyến khi có đường viền chung hoặc riêng biệt."> border-collapse là thu gọn . Hiện tại, hành vi trên các thành phần bảng nội bộ chưa được xác định.. Nó cũng áp dụng cho ::first -thư.
Thừa hưởng KHÔNG
Tỷ lệ phần trăm tham khảo kích thước tương ứng của hộp viền
Phương tiện truyền thông thị giác
Giá trị tính toán như mỗi thuộc tính của tốc ký:
Kiểu hoạt hình như mỗi thuộc tính của tốc ký:
Thứ tự kinh điển trật tự duy nhất không mơ hồ được xác định bởi ngữ pháp hình thức
Tính tương thích của trình duyệt web
Máy tính để bàn Điện thoại di động
Trình duyệt Chrome Bờ rìa Firefox trình duyệt web IE
Opera Cuộc đi săn Chế độ xem web trên Android Chrome dành cho Android Cạnh di động Firefox dành cho Android Opera cho Android Safari trên iOS Internet Samsung
Hỗ trợ cơ bản Chrome Hỗ trợ đầy đủ 4 Edge Hỗ trợ đầy đủ 12 Hỗ trợ đầy đủ 12 Hỗ trợ đầy đủ 12 Firefox hỗ trợ đầy đủ 4 IE Hỗ trợ đầy đủ 9 Opera Hỗ trợ đầy đủ 10.5 Safari Hỗ trợ đầy đủ 5 WebView Android Hỗ trợ đầy đủ 2 Edge Mobile Hỗ trợ đầy đủ Có Hỗ trợ đầy đủ Có Hỗ trợ đầy đủ Có Firefox Android Hỗ trợ đầy đủ Có Opera Android Hỗ trợ đầy đủ Safari iOS Hỗ trợ đầy đủ Có
Đường viền hình elip Chrome Hỗ trợ đầy đủ Có Hỗ trợ đầy đủ cạnh 12 Firefox hỗ trợ đầy đủ 3.5 IE Hỗ trợ đầy đủ Có Opera Hỗ trợ đầy đủ Có Safari Hỗ trợ đầy đủ Có WebView Android? Chrome Android Hỗ trợ đầy đủ Có Safari iOS? SAMSUNG InternetAndroid Hỗ trợ đầy đủ Có
4 giá trị cho 4 góc Chrome Hỗ trợ đầy đủ 4 Hỗ trợ đầy đủ cạnh 12 Firefox Hỗ trợ đầy đủ Có IE Hỗ trợ đầy đủ Có Opera Hỗ trợ đầy đủ Có Safari Hỗ trợ đầy đủ 5 WebView Android? Chrome Android Hỗ trợ đầy đủ Có Edge Mobile Hỗ trợ đầy đủ Có Firefox Android Hỗ trợ đầy đủ Có Opera Android Không hỗ trợ Không Safari iOS? Samsung Internet Android Hỗ trợ đầy đủ Có
Tỷ lệ phần trăm Chrome Hỗ trợ đầy đủ Có Hỗ trợ đầy đủ cạnh 12 Firefox Huyền thoại
Hỗ trợ đầy đủ Hỗ trợ đầy đủ Không có hỗ trợ Không có hỗ trợ Khả năng tương thích không xác định Không rõ khả năng tương thích Xem ghi chú triển khai.
Xem ghi chú thực hiện.
Yêu cầu tiền tố của nhà cung cấp hoặc tên khác để sử dụng. Xem thêm
Bạn có thể chỉ định kiểu đường viền chỉ trên một cạnh của phần tử. Để thực hiện việc này, hãy sử dụng các thuộc tính border-top (viền trên), border-right (viền phải), border-bottom (viền dưới), border-left (viền trái).
Trong ví dụ này, mỗi cạnh của khối có độ dày, kiểu dáng và màu sắc đường viền khác nhau.
Hãy suy nghĩ về cách bạn có thể tạo một hình dạng như thế này bằng CSS:
Các giá trị đường viền - độ dày, kiểu dáng và màu sắc - có thể được đặt riêng bằng các thuộc tính đặc biệt.
- phong cách biên giới - phong cách biên giới.
- chiều rộng đường viền - chiều rộng đường viền.
- màu viền - màu viền.
Chúng ta hãy xem xét từng giá trị riêng biệt.
thuộc tính kiểu đường viền Kiểu viền.
Thuộc tính border-style thiết lập kiểu đường viền. Trong CSS, không giống như HTML, đường viền của một phần tử không chỉ có thể chắc chắn. Các giá trị sau được phép cho kiểu đường viền:
- không có - không có đường viền (mặc định).
- viền liền khối - chắc chắn.
- double - đường viền kép.
- đường viền nét đứt - chấm.
- chấm - một đường viền được tạo thành từ một loạt các dấu chấm.
- sườn núi - đường viền "sườn núi".
- rãnh - đường viền "rãnh".
- inset - đường viền chán nản.
- ngay từ đầu - đường viền ép đùn.
Ví dụ về những gì họ trông như thế nào.
không có biên giới (không có)
đường viền vững chắc
đường viền đôi
đường viền của một loạt các dấu chấm (chấm)
đường viền nét đứt
đường viền rãnh
biên giới sườn núi
đường viền thụt vào (hình nhỏ)
đường viền ép đùn (bắt đầu)
Nhân tiện, nếu bạn đặt màu đường viền thành màu đen cho khung sườn núi, bạn sẽ nhận được kết quả này.
Khối div có viền đen và kiểu đường gờ.
Khung trông chắc chắn, nhưng đó là do kiểu đường gờ được tạo bằng cách thêm hiệu ứng bóng đen và hiệu ứng đen không hiển thị trên khung đen.
Sử dụng thuộc tính border-style, kiểu đường viền có thể được đặt không chỉ cho tất cả các cạnh của khối. Có thể đặt nhiều giá trị cho một thuộc tính kiểu đường viền, tùy theo số lượng giá trị mà kiểu đường viền sẽ được gán cho số cạnh khác nhau của khối. Bạn có thể đặt một, hai, ba hoặc bốn giá trị. Hãy xem xét các ví dụ cho từng trường hợp.
Một giá trị (rắn) - kiểu đường viền được đặt cho tất cả các cạnh của khối.
Hai giá trị (solid double) - giá trị đầu tiên đặt kiểu cho cạnh trên và dưới, giá trị thứ hai cho cạnh.
Ba giá trị (chấm kép liền nét) - giá trị đầu tiên cho mặt trên, giá trị thứ hai cho các cạnh, giá trị thứ ba cho mặt dưới.
Bốn giá trị (nét đứt đôi nét liền) - mỗi giá trị cho một bên theo chiều kim đồng hồ bắt đầu từ trên cùng.
Thuộc tính chiều rộng đường viền. Độ dày đường viền.
Để đặt độ rộng đường viền của một phần tử, hãy sử dụng thuộc tính border-width. Độ dày đường viền có thể được chỉ định theo bất kỳ đơn vị đo lường tuyệt đối nào, ví dụ như bằng pixel.
Giống như thuộc tính kiểu đường viền, thuộc tính này cũng có thể được đặt thành một đến bốn giá trị. Hãy xem xét các ví dụ cho từng trường hợp.
Mã ví dụ:
Ngoài ra còn có các giá trị từ khóa cho thuộc tính border-width. Tổng cộng có ba:
- viền mỏng - mỏng;
- độ dày trung bình - trung bình;
- dày - viền dày;
Độ dày viền: mỏng.
Độ dày viền: trung bình.
Độ dày viền: dày.
Thuộc tính màu đường viền. Màu viền.
Để kiểm soát màu đường viền, hãy sử dụng công cụ màu đường viền. Màu sắc cho thuộc tính này có thể được đặt bằng bất kỳ phương pháp nào được mô tả trong bài viết "Màu sắc trong CSS", cụ thể là:
- Ký hiệu thập lục phân (#ff00aa) của màu.
- định dạng RGB- rgb(255,12,110) . Định dạng RGBA cho CSS3.
- định dạng HSL và HSLA cho CSS3.
- Tên màu, ví dụ màu đen. Để biết danh sách đầy đủ các tên màu, hãy xem bảng Tên màu CSS.
Thuộc tính border-color cũng có thể có từ một đến bốn giá trị và xử lý chúng tương tự như các thuộc tính trước đó.
Một giá trị (màu đỏ).
Hai giá trị (đỏ đen).
Ba giá trị (đỏ đen vàng).
Bốn giá trị (đỏ đen vàng xanh).
Bây giờ chúng ta hãy quay lại bài toán đã nêu ở trên và vẽ hình:
Đây là đoạn mã vẽ một hình như vậy, chỉ có kích thước lớn hơn:
Đặt giá trị cho các bên riêng biệt
Ở trên đã đề cập rằng bạn có thể chỉ định các giá trị thuộc tính đường viền cho chỉ một cạnh của khối. Có những tài sản cho những mục đích này:
- border-top (đường viền trên cùng)
- border-right (viền phải)
- viền dưới
- viền trái (viền trái)
Hãy để tôi nhắc bạn rằng đối với tất cả các thuộc tính, ba giá trị được chỉ định (độ dày, kiểu dáng và màu sắc) theo bất kỳ thứ tự nào. Nhưng có những thuộc tính cho phép bạn đặt độ dày, màu sắc và kiểu dáng cho từng mặt riêng biệt. Việc viết các thuộc tính này bắt nguồn từ những điều trên.
Tùy chọn đường viền trên cùng (border-top).
- border-top-color - đặt màu của đường viền trên cùng của phần tử.
- border-top-width - đặt độ dày của đường viền trên cùng của phần tử.
- border-top-style - đặt kiểu đường viền trên cùng của phần tử.
Tùy chọn viền phải (viền-phải).
- border-right-color - đặt màu cho đường viền bên phải của phần tử.
- border-right-width - đặt độ dày của đường viền bên phải của phần tử.
- border-right-style - đặt kiểu đường viền bên phải của phần tử.
Tùy chọn viền dưới (border-bottom).
- border-bottom-color - đặt màu cho đường viền dưới cùng của phần tử.
- border-bottom-width - đặt độ dày của đường viền dưới cùng của phần tử.
- border-bottom-style - đặt kiểu đường viền dưới cùng của phần tử.
Tùy chọn viền trái (viền trái).
- border-left-color - đặt màu cho đường viền bên trái của phần tử.
- border-left-width - đặt độ dày của đường viền trái của phần tử.
- border-left-style - thiết lập kiểu đường viền trái của phần tử.
Một ví dụ về việc sử dụng các thuộc tính này:
- màu của đường viền trên cùng được xác định lại thành màu đỏ bằng cách sử dụng thuộc tính border-top-color,
- sử dụng thuộc tính border-right-width, độ dày của đường viền bên phải được đặt thành 10px,
- sử dụng thuộc tính border-bottom-style, kiểu của đường viền dưới được xác định lại là double,
- Sử dụng thuộc tính border-left-color, màu viền trái được đặt thành màu xanh lam.
Thuộc tính bán kính đường viền. Làm tròn các góc viền.
Thuộc tính bán kính đường viền nhằm mục đích làm tròn các góc của đường viền của một phần tử. Thuộc tính này được giới thiệu trong CSS3 và hoạt động chính xác trong tất cả các trình duyệt hiện đại. ngoại trừ Internet Explorer 8 (và các phiên bản cũ hơn).
Các giá trị có thể là bất kỳ số nào được sử dụng trong CSS.
Thuộc tính bán kính đường viền: 15px.
Nếu khung khối không được chỉ định thì phần phi lê sẽ xuất hiện cùng với nền. Dưới đây là ví dụ về khối tròn không có đường viền nhưng có màu nền:
Thuộc tính bán kính đường viền: 15px.
Có các thuộc tính để làm tròn từng góc riêng lẻ của một phần tử. Ví dụ này sử dụng tất cả chúng:
Bán kính đường viền trên cùng bên trái: 15px; bán kính đường viền trên cùng bên phải: 0; bán kính viền dưới bên phải: 15px; bán kính viền dưới bên trái: 0;
Thuộc tính bán kính đường viền: 15px.
Mặc dù mã này có thể được viết trong một khai báo: border-radius : 15px 0 15px 0 . Thực tế là thuộc tính bán kính đường viền có thể được đặt từ một đến bốn giá trị. Bảng dưới đây phác thảo các quy tắc chi phối các thông báo như vậy.
Sau khi nghiên cứu kỹ bảng này, bạn có thể hiểu rằng điều quan trọng nhất ghi chú ngắn phong cách mong muốn sẽ như thế này: border-radius : 15px 0 . Chỉ có hai ý nghĩa.
Một chút luyện tập
Vẽ một quả chanh bằng CSS.
Đây là mã cho một khối như vậy:
Ký quỹ: 0 tự động; /* Căn giữa khối */ width: 200px; chiều cao: 200px; nền: #F5F240; đường viền: 1px liền khối #F0D900; bán kính đường viền: 10px 150px 30px 150px;
Chúng tôi đã vẽ hình:
Bây giờ hãy để lại một hình tam giác từ nó:
Mã tam giác là:
Ký quỹ: 0 tự động; /* Căn giữa khối */ đệm: 0px; chiều rộng: 0px; chiều cao: 0; đường viền: 30px màu trắng; màu viền dưới: đỏ;
Trong bài học trước, chúng ta đã học cách thiết lập đường viền cho một phần tử. Chúng tôi cũng đã xem xét các thuộc tính như border-color và border-style , mà bạn có thể tùy chỉnh màu sắc và kiểu dáng của đường viền. Tuy nhiên, tất cả các khung hình của chúng tôi đều có góc vuông. Bây giờ chúng tôi sẽ cho bạn biết cách làm góc tròn trong CSS cho đường viền.
Cách làm tròn các góc: Thuộc tính bán kính đường viền CSS3
Làm tròn các góc trong CSS có thể được thực hiện cho bất kỳ thành phần nào trên trang HTML. Để làm điều này, bạn cần áp dụng thuộc tính bán kính đường viền cho nó với giá trị phù hợp. Thông thường, giá trị được chỉ định bằng pixel, nhưng cũng có thể sử dụng các đơn vị khác, chẳng hạn như em hoặc phần trăm (tính bằng pixel). trường hợp sau việc tính toán được thực hiện tương ứng với chiều rộng của khối).
Tác dụng của tài sản này sẽ chỉ đáng chú ý nếu phần tử được tạo kiểu có nền và/hoặc đường viền màu. Ví dụ:
BorderElement ( màu nền: #EEDDFF; đường viền: 6px Solid #7922CC; bán kính đường viền: 25px; )
Kiểu được mô tả ở trên sẽ cho kết quả sau trên phần tử
Bạn cũng có thể chỉ tạo các cạnh bo tròn cho các góc trên cùng hoặc dưới cùng của phần tử hoặc đặt cho mỗi góc một bán kính bo tròn khác nhau - rất nhiều chỗ cho trí tưởng tượng! Ví dụ:
BorderElement ( màu nền: #EEDDFF; đường viền: 6px Solid #7922CC; bán kính đường viền: 25px; ) .borderElement1 ( màu nền: #FFE8DB; đường viền: 6px Solid #FF5A00; bán kính đường viền: 15px 100px 15px 100px; ) 
Nhưng đó không phải là tất cả: thay vì các góc tròn đơn giản, bạn có thể chỉ định làm tròn hình elip. Để thực hiện việc này, bạn sẽ cần chỉ định hai giá trị được phân tách bằng dấu gạch chéo (đối với bán trục ngang và dọc của hình elip). Hãy đưa ra một ví dụ về khối 150x450 pixel:
BorderElement ( màu nền: #EEDDFF; đường viền: 6px Solid #7922CC; bán kính đường viền: 280px/100px; ) 
Bạn có thể kết hợp các giá trị (tức là sử dụng cả hình tròn thông thường và hình elip theo cùng một kiểu) và bạn cũng có thể thêm kiểu riêng cho từng góc bằng cách sử dụng các thuộc tính thích hợp:
- bán kính viền trên cùng bên trái - cho góc trên cùng bên trái;
- bán kính trên cùng bên phải - cho góc trên cùng bên phải;
- bán kính dưới cùng bên trái - cho góc dưới bên trái;
- bán kính viền dưới bên phải - cho góc dưới bên phải.
Nguyên tắc bo tròn các góc
Hình ảnh bên dưới cho thấy cách tính toán làm tròn góc trong CSS. Vì vậy, nếu một giá trị duy nhất được chỉ định cho góc - ví dụ: 20px - điều này có nghĩa là việc làm tròn sẽ xảy ra dọc theo một vòng tròn có bán kính 20 pixel. Trong trường hợp hai giá trị được chỉ định cách nhau bằng dấu gạch chéo, ví dụ: 30px/20px, các góc sẽ được làm tròn dọc theo hình elip. Giá trị đầu tiên trong trường hợp này là độ dài bán trục ngang của hình elip - 30px và giá trị thứ hai là độ dài bán trục dọc - 20px:
Tài sản Đường viền CSS-radius được hỗ trợ bởi tất cả các phiên bản trình duyệt hiện đại.
Gần đây tôi đang cố gắng suy nghĩ lại các quy tắc CSS mà tôi đã áp dụng trong quá trình thực hành của mình. tôi đã viết số lượng lớn mã mà không có bất kỳ sự hiểu biết thực sự nào về lý do tại sao nó hoạt động như vậy.
Tôi chỉ đơn giản giải quyết vấn đề theo một cách nhất định, dựa trên thực tiễn được chấp nhận rộng rãi. Nhưng gần đây tôi tự hỏi liệu tôi có thể tìm ra ít nhất gần đúng lý do tại sao mọi thứ lại hoạt động như vậy không?
Vòng tròn hoàn hảo trong CSS
Một mẫu thiết kế phổ biến mà chúng ta thường thấy trên các trang web là hình tròn hoàn hảo. Đôi khi hình tròn có một số màu sắc hoặc hình ảnh làm nền.Vòng kết nối CSS trên Rdio, Dribbble và Codecademy
Thủ thuật này thường đạt được bằng cách sử dụng thuộc tính CSS bán kính đường viền. Tôi đã giải quyết vấn đề này theo cách sau: Tôi đã tạo một hình vuông và đặt bán kính đường viền thành 50%. Tôi chưa bao giờ đặt câu hỏi tại sao phải làm theo cách này, tôi chỉ chấp nhận rằng nếu tôi đặt bán kính bằng một nửa chiều cao/chiều rộng của hình vuông ở tất cả các góc, tôi sẽ có được một hình tròn.
Hãy xem một ví dụ. Giả sử chúng ta có một hình vuông có kích thước 150px x 150px, hãy biến nó thành hình tròn bằng cách đặt bán kính cho mỗi góc là 50%. Theo tiêu chuẩn W3C trong phần bán kính đường viền, đơn vị phần trăm cho bán kính đường viền đề cập đến chiều rộng và chiều cao của phần tử. Trong ví dụ của tôi, chiều rộng/chiều cao của phần tử là 150px, vì vậy 50% sẽ cho chúng ta giá trị 75px.
Chuyển đổi hình vuông thành hình tròn bằng thuộc tính bán kính đường viền CSS (xem trên CodePen)
Bán kính đường viền thực sự hoạt động như thế nào?
Đôi khi tôi thấy ý tưởng thiết kế này được thực hiện bằng cách đặt bán kính đường viền thành 100%. Bản thân tôi đã làm điều tương tự trong dự án của mình vài ngày trước mà không hề suy nghĩ về nó. Nó trông giống hệt nhau, tạo thành một vòng tròn hoàn hảo. Nhưng tại sao?Trình duyệt cũng sẽ chia tỷ lệ tất cả các góc khác cho đến khi mỗi góc có bán kính 50% và chúng ta có được hình tròn của mình. Ngay cả khi bạn chỉ định bán kính 150px cho mỗi góc, thực tế bạn sẽ có bán kính 75px, vì điều này gia trị lơn nhât cho phép bạn đặt trình duyệt cho từng góc.
Phần kết luận
Nếu bạn đặt bán kính đường viền thành 100% cho tất cả các góc của một phần tử, thì phía sau trình duyệt sẽ thực hiện công việc làm thêmđể mở rộng các góc cho đến khi chúng gặp nhau. Tôi không chắc liệu có bất kỳ tác động nào về hiệu suất hay không khi đặt bán kính đường viền thành 100% cho tất cả các vòng kết nối của bạn.Qua ít nhất, điều này có vẻ khá vô nghĩa nếu bạn biết trước rằng trình duyệt sẽ mở rộng bán kính lên 50%. Sử dụng 50% có vẻ là một quyết định đúng đắn.
Đã đến lúc tôi sửa các thuộc tính CSS ngẫu nhiên mà tôi đã thêm vào tuần trước...
Tags: css, bán kính đường viền
Tôi chắc rằng bạn đã quen với thuộc tính css viền. Bạn sẽ học được điều gì mới mà trước đây bạn chưa biết về đường viền css chứ? Chà, bạn không chỉ học được mà còn học được một số điều mới mà bạn chưa từng biết trước đây!
CSS3 không chỉ có thể được sử dụng để tạo các góc tròn mà mã CSS thuần túy còn có thể được sử dụng để tạo các hình dạng phức tạp. Trước đây, bạn có thể sử dụng hình nền để tạo ra các góc tròn. Nhờ các kỹ thuật mới để sử dụng đường viền, chúng ta có thể thực hiện việc này bằng mã CSS thuần túy.
Cơ bản về sử dụng đường viền css
Có thể bạn đã quen với cách sử dụng tiêu chuẩn của thuộc tính border:
Đường viền: màu đen đặc 1px;
Đoạn mã trên sẽ xuất ra đường viền 1px có màu đen. Đơn giản và dễ dàng. Bạn cũng có thể mở rộng cú pháp một chút:
Độ rộng viền: dày; kiểu viền: liền khối; màu viền: đen;
Ngoài ra, bạn có thể sử dụng ý nghĩa cụ thể thuộc tính chiều rộng đường viền, ba từ khóa: mỏng, trung bình, dày.
Nhưng việc sử dụng cú pháp mở rộng không phải lúc nào cũng thực tế. Hãy xem một ví dụ khi bạn cần thay đổi màu của khung khối khi di chuột. Trong trường hợp này, sử dụng cú pháp tốc ký đơn giản hơn nhiều:
Hộp ( đường viền: 1px màu đỏ đậm; ) .box:hover ( đường viền: 1px màu xanh lá cây; )
Một cách thanh lịch và đơn giản hơn để làm điều này là:
Hộp ( border: 1px màu đỏ đậm; ) .box:hover ( border-color: green; )
Như bạn có thể thấy, kỹ thuật nâng cao cũng hữu ích khi chúng ta chỉ thay đổi một số thuộc tính: chiều rộng, kiểu dáng, màu sắc và các thuộc tính khác.
Bán kính đường viền
Ranh giới-bán kính- Đây là thuộc tính “vàng” của CSS3 - thuộc tính đầu tiên, phổ biến nhất đã trở nên thiết thực và hữu ích. Ngoại trừ IE8 và các phiên bản bên dưới, tất cả các trình duyệt đều hiển thị các góc tròn bằng cách sử dụng tính năng này.
Mặc dù vậy, cần phải sử dụng các tiền tố đặc biệt cho Webkit và Mozilla để kiểu dáng chính xác.
Bán kính đường viền Webkit: 10px; -moz-biên giới-bán kính: 10px; bán kính đường viền: 10px;
Ngày nay, chúng ta có thể loại bỏ các tiền tố đặc biệt và sử dụng dạng bán kính đường viền tiêu chuẩn.
Một lợi ích khác là chúng ta có thể sử dụng các giá trị đặc biệt cho mỗi bên của khối:
Bán kính đường viền trên cùng bên trái: 20px; bán kính đường viền trên cùng bên phải: 0; bán kính viền dưới bên phải: 30px; bán kính viền dưới bên trái: 0;
Trong đoạn mã trên, đặt bán kính đường viền trên cùng bên phải và bán kính đường viền dưới cùng bên trái thành "null" có thể đạt được một số hình dạng đáng kinh ngạc. Mặc dù phần tử có thể kế thừa một số thuộc tính cần được đặt lại.
Tương tự như lề và phần đệm, chúng ta có thể nén cú pháp:
/* trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải, dưới cùng bên trái */ bán kính đường viền: 20px 0 30px 0;
Ví dụ về cách sử dụng thuộc tính border-radius, tôi sẽ chỉ cho bạn một loại “quả chanh” mà các nhà thiết kế thường sử dụng khi thiết kế trang web:
Lemon ( chiều rộng: 200px; chiều cao: 200px; nền: #F5F240; đường viền: 1px Solid #F0D900; bán kính đường viền: 10px 150px 30px 150px; )
Hãy vượt xa những điều cơ bản
Đối với nhiều nhà thiết kế, mọi kiến thức về lĩnh vực thuộc tính đường viền CSS đều kết thúc ở đây. Nhưng có một số điều thú vị khác mà bạn có thể sử dụng để tạo ra những điều tuyệt vời!
Cấu trúc đường viền css phức tạp
Có nhiều kỹ thuật để tạo ra các thiết kế sử dụng các cấu trúc đường viền phức tạp. Ví dụ: chúng ta hãy xem những điều sau đây...
Kiểu viền
Chúng tôi luôn sử dụng các tính chất nổi tiếng nhất là liền nét, nét đứt và chấm. Nhưng có một số thuộc tính kiểu đường viền khác: rãnh và đường gờ.
Đường viền: rãnh 20px #e3e3e3;
Hoặc theo cú pháp mở rộng:
Màu viền: #e3e3e3; chiều rộng đường viền: 20px; kiểu viền: rãnh;
Mặc dù các thuộc tính này hữu ích nhưng chúng không phải là cơ sở để tạo các khung phức tạp.
Đề cương
Kỹ thuật tạo phổ biến nhất khung đôi- sử dụng thuộc tính phác thảo.
Hộp ( đường viền: 5px Solid #292929; đường viền: 5px Solid #e3e3e3; )
Phương pháp này hoạt động rất tốt, mặc dù nó giới hạn chúng ta chỉ có hai khung hình. Đôi khi bạn cần tạo một đường viền chuyển màu bao gồm nhiều lớp... vậy thì làm thế nào?
Yếu tố giả
Khi kỹ thuật phác thảo là không đủ, phương tiện thay thế là sử dụng các phần tử giả:trước và:sau. Nhờ đó bạn có thể thêm các khung bổ sung vào một phần tử:
Hộp ( chiều rộng: 200px; chiều cao: 200px; nền: #e3e3e3; vị trí: tương đối; đường viền: 10px màu xanh lá cây; ) /* Tạo hai hộp có cùng chiều rộng của vùng chứa */ .box:after, .box:trước ( nội dung: ""; vị trí: tuyệt đối; bên trái: 0; .box:after ( đường viền: 5px màu vàng đậm; ) .box:trước ( đường viền : 10px màu xanh lam )
Nó trông không thanh lịch lắm, nhưng ít nhất nó hoạt động. Hơi khó để tìm ra chuỗi màu sắc trong khung hình... nhưng bạn có thể hiểu được.
Bóng hộp
Một "cách dành cho trẻ em" thú vị để tạo hiệu ứng tương tự là sử dụng thuộc tính box-shadow CSS3:
Hộp (đường viền: 5px màu đỏ đặc; bóng hộp: 0 0 0 5px màu xanh lá cây, 0 0 0 10px màu vàng, 0 0 0 15px màu cam; )
Trong trường hợp này, chúng tôi đã thông minh hơn và sử dụng thuộc tính box-shadow chuyên dụng. Bằng cách thay đổi các tham số x, y, Blur về 0, chúng ta có thể sử dụng các màu khác nhau để tạo ra nhiều khung hình.
Nhưng có một vấn đề: trong các trình duyệt cũ không hiểu thuộc tính box-shadow, chỉ hiển thị một khung màu đỏ 5px.
"Nhớ! Thiết kế trang web phải trông giống nhau trên nhiều trình duyệt, nghĩa là giống nhau trên tất cả các trình duyệt. Bao gồm cả các phiên bản cũ hơn."
Thay đổi góc độ
Ngoài giá trị bán kính đường viền đơn giản được sử dụng, chúng ta có thể chỉ định hai giá trị riêng biệt - tách chúng bằng / chúng ta chỉ định bán kính ngang và dọc.
Ví dụ:
Bán kính đường viền: 50px / 100px; /* bán kính ngang, bán kính dọc */
... điều này tương đương với:
Bán kính đường viền trên cùng bên trái: 50px 100px; bán kính đường viền trên cùng bên phải: 50px 100px; bán kính viền dưới bên phải: 50px 100px; bán kính viền dưới bên trái: 50px 100px;
Kỹ thuật này phù hợp để tạo các hình dạng khối độc đáo. Ví dụ: đây là cách tạo hiệu ứng giấy gói:
Hộp ( chiều rộng: 200px; chiều cao: 200px; nền: #666; bán kính viền trên cùng bên trái: 15em 1em; bán kính viền dưới cùng bên phải: 15em 1em; )
Biểu mẫu CSS sử dụng đường viền
Kỹ thuật này cho thấy cách bạn có thể tạo các biểu mẫu CSS trong khi sử dụng các phần tử có kích thước chiều cao và chiều rộng bằng 0. Ngạc nhiên? Hãy xem một ví dụ...
Đối với một số ví dụ tiếp theo, chúng tôi sẽ sử dụng đánh dấu sau:
...và kiểu cơ bản sau:
Hộp ( chiều rộng: 200px; chiều cao: 200px; nền: đen; )
Ví dụ phổ biến nhất của việc sử dụng các hình dạng CSS là tạo một mũi tên bao quanh. Bí mật của mũi tên này nằm ở việc tạo đường viền bằng màu sắc khác nhau cho mỗi bên. Sau đó, đặt thuộc tính chiều rộng và chiều cao thành 0.
Hãy gán lớp mũi tên cho khối div:
Mũi tên ( chiều rộng: 0; chiều cao: 0; viền trên: 100px màu đỏ đậm; viền bên phải: 100px màu xanh lá cây; viền dưới: 100px màu xanh lam; viền trái: 100px màu vàng đậm; )
Để chứng minh, trước tiên chúng tôi sử dụng cú pháp mở rộng. Tiếp theo, chúng ta có thể loại bỏ mã bổ sung bằng cú pháp tốc ký:
Mũi tên ( chiều rộng: 0; chiều cao: 0; đường viền: liền khối 100px; màu đường viền: đỏ xanh lục xanh vàng; )
Thật thú vị phải không? Bây giờ chúng ta sẽ đặt màu trong suốt ở tất cả các mặt ngoại trừ mặt màu xanh.
Mũi tên ( chiều rộng: 0; chiều cao: 0; đường viền: nét liền 100px; màu viền dưới: xanh lam; )
Nó trở nên tuyệt vời! Nhưng điều này mâu thuẫn bố cục ngữ nghĩa, tạo một div .arrow, chỉ để thêm một mũi tên vào trang. Với mục đích này, chúng ta có thể sử dụng các phần tử giả, đó là những gì chúng ta sẽ làm bây giờ.
Tạo bong bóng lời nói
Để tạo Bong bóng lời nói, chúng ta cần một mảnh nhỏ CSS thuần túy mã và một khối div.
Bong bóng lời nói ( vị trí: tương đối; màu nền: #292929; chiều rộng: 200px; chiều cao: 150px; chiều cao dòng: 150px; /* căn giữa theo chiều dọc */ màu: trắng; căn chỉnh văn bản: giữa; )
Speech-bubble:after ( nội dung: ""; )
Ở giai đoạn này, chúng ta sẽ tạo mũi tên mà chúng ta đã tạo trước đó, thêm nó vào phần tử và tất cả những gì còn lại là định vị nó:
Bong bóng lời nói:sau ( nội dung: ""; vị trí: tuyệt đối; chiều rộng: 0; chiều cao: 0; đường viền: 10px liền khối; màu đường viền: đỏ xanh lục xanh vàng; )
Nếu chúng ta muốn mũi tên hướng xuống dưới, chúng ta sẽ phải đặt tất cả các đường viền thành trong suốt ngoại trừ đường viền trên cùng.
Speech-bubble:after ( nội dung: ""; vị trí: tuyệt đối; chiều rộng: 0; chiều cao: 0; đường viền: 10px rắn; màu viền trên cùng: đỏ; )
Khi tạo biểu mẫu CSS này, chúng tôi không thể chỉ định cụ thể kích thước của mũi tên. Thay vào đó, chúng ta có thể đặt thuộc tính border-width để gán kích thước cho mũi tên. Chúng ta cũng sẽ đặt vị trí của mũi tên ở phía dưới ở giữa. Theo đó, để làm điều này, chúng tôi sử dụng các giá trị trên và bên trái.
Speech-bubble:after ( nội dung: ""; vị trí: tuyệt đối; chiều rộng: 0; chiều cao: 0; đường viền: 15px liền khối; đường viền trên cùng màu: đỏ; trên cùng: 100%; bên trái: 50%; )
Ngoài ra, chúng ta chỉ cần cho nó cùng màu với khối là được. Hãy nhớ rằng, khi định vị, bạn cần tính đến kích thước của các đường viền khác, không nhìn thấy được (15px). Chúng tôi cũng sẽ làm tròn khối ở các góc.
Speech-bubble ( /* … các kiểu khác */ border-radius: 10px; ) .speech-bubble:after ( nội dung: ""; vị trí: tuyệt đối; chiều rộng: 0; chiều cao: 0; đường viền: nét liền 15px; đường viền trên cùng -color: #292929; top: 100%; lề trái: -15px; /* điều chỉnh độ rộng đường viền */ )
Không tệ nhỉ? Sử dụng một số lớp CSS và thủ thuật đường viền, bạn có thể tạo ra một thứ như vậy.
/* Cách sử dụng Speech Bubbles: Áp dụng lớp .speech-bubble và .speech-bubble-DIRECTION như hiển thị bên dưới
Thưởng! Định tâm dọc trong khối
Đối với một dòng văn bản, bạn có thể sử dụng chiều cao dòng. Nhưng nếu bạn có hai dòng văn bản trở lên... Giải pháp tốt nhất là đặt thuộc tính hiển thị thành bảng và đặt tất cả văn bản vào một đoạn văn. Đây là những gì nó trông giống như trong đánh dấu html:
Speech-bubble ( /* các kiểu khác */ display: table; ) .speech-bubble p ( display: table-cell; Vertical-align: middle; )
Chúng tôi không giới hạn bản thân trong hình tam giác. CSS có khả năng hiển thị các hình dạng khác nhau - thậm chí cả trái tim và dấu hiệu nguy hiểm sinh học.
Biohazard ( width: 0; Height: 0; border: 60px Solid; border-radius: 50%; border-top-color: black; border-bottom-color: black; border-left-color: yellow; border-right- màu vàng)
