Thuộc tính bán kính đường viền bắt đầu bắt đầu CSS
Ví dụ
Thêm các góc tròn vào các cạnh bắt đầu khối và bắt đầu nội tuyến của một số phần tử:
#example1 {
background-color: lightblue;
border-start-start-radius: 50px;
}
#example2 {
background-color: lightblue;
border-start-start-radius: 50px 20px;
}
#example3 {
background-color: lightblue;
border-start-start-radius: 50%;
direction: rtl;
}
#example4 {
background-color: lightblue;
border-start-start-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-start-radius
xác định bán kính của góc giữa cạnh bắt đầu khối và cạnh bắt đầu nội tuyến 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-start-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-start-radius
có hai giá trị thì góc sẽ là hình elip:
- bán kính bắt đầu biên giới: 50px 100px;
Nếu thuộc tính border-start-start-radius
có một giá trị thì góc sẽ là hình tròn:
- bán kính bắt đầu biên giới: 50px;
Thuộc tính CSS border-start-start-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-start-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.borderStartStartRadius="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-start-radius | 89.0 | 89.0 | 66.0 | 15.0 | 75.0 |
Cú pháp CSS
border-start-start-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-start. Read about length units | Demo ❯ |
% | Defines the shape of the corner at block-start and inline-start 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 ở điểm bắt đầu trong khối và 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-start-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 khối và 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-start-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