Thuộc tính bán kính đường viền bắt đầu cuối CSS
Ví dụ
Thêm các góc tròn vào các cạnh đầu khối và cuối dòng của một số phần tử:
#example1 {
background-color: lightblue;
border-start-end-radius: 50px;
}
#example2 {
background-color: lightblue;
border-start-end-radius: 50px 20px;
}
#example3 {
background-color: lightblue;
border-start-end-radius: 50%;
direction: rtl;
}
#example4 {
background-color: lightblue;
border-start-end-radius: 50%;
writing-mode: vertical-rl;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính border-start-end-radius
xác định bán kính của góc giữa cạnh đầu khối và cạnh cuối cùng của phần tử.
Lưu ý: Các thuộc tính CSS có liên quan writing-mode
, text-orientation
và direction
xác định hướng khối và nội tuyến. Đó là lý do tại sao các thuộc tính này cũng ảnh hưởng đến kết quả của thuộc tính border-start-end-radius
. Đối với các trang bằng tiếng Anh, hướng nội tuyến là từ trái sang phải và hướng khối là hướng xuống dưới.
Nếu thuộc tính border-start-end-radius
có hai giá trị thì góc sẽ là hình elip:
- bán kính đường viền bắt đầu kết thúc: 50px 100px;
Nếu thuộc tính border-start-end-radius
có một giá trị thì góc sẽ là hình tròn:
- bán kính đường viền bắt đầu kết thúc: 50px;
Thuộc tính CSS border-start-end-radius
rất giống với các thuộc tính CSS border-bottom-left-radius
, border-bottom-right-radius
, border-top-left-radius
và border-top-right-radius
, nhưng thuộc tính Thuộc tính border-start-end-radius
phụ thuộc vào hướng khối và nội tuyến.
Giá trị mặc định: | 0 |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.borderStartEndRadius="50px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
border-start-end-radius | 89.0 | 89.0 | 66.0 | 15.0 | 75.0 |
Cú pháp CSS
border-start-end-radius: 0| length |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
0 | Default value. | Demo ❯ |
length | Defines the shape of the corner at block-start and inline-end. Read about length units | Demo ❯ |
% | Defines the shape of the corner at block-start and inline-end in percentange of length of element on corresponding axis. | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Với tính chất hướng
Vị trí của góc tròn ở đầu theo hướng khối và ở cuối theo hướng nội tuyến bị ảnh hưởng bởi thuộc tính direction
:
#example1 {
border: 2px solid red;
direction: rtl;
border-start-end-radius: 25px;
}
Hãy tự mình thử »Với thuộc tính chế độ viết
Vị trí của góc tròn ở đầu theo hướng khối và ở cuối theo hướng nội tuyến bị ảnh hưởng bởi thuộc tính writing-mode
:
#example2 {
border: 2px solid red;
writing-mode: vertical-rl;
border-start-end-radius: 25px;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Góc tròn CSS
Thuộc tính bán kính đường viền dưới cùng bên trái của CSS: Thuộc tính bán kính đường viền dưới cùng bên trái của CSS
Thuộc tính bán kính đường viền dưới bên phải của CSS: Thuộc tính bán kính đường viền dưới bên phải của CSS
Thuộc tính bán kính đường viền trên cùng bên trái của CSS: Thuộc tính bán kính đường viền trên cùng bên trái của CSS
Thuộc tính bán kính đường viền trên bên phải của CSS: Thuộc tính bán kính đường viền trên bên phải của CSS
Thuộc tính hướng CSS: Thuộc tính CSS Direction
Thuộc tính định hướng văn bản CSS: Thuộc tính định hướng văn bản CSS
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS