Thuộc tính border-image-outset
Thuộc tính border-image-outset cho phép
đẩy đường viền ra ngoài giới hạn của phần tử. Giá trị
được chỉ định là một số không có đơn vị đo
hoặc bất kỳ đơn vị
kích thước nào, trừ phần trăm. Nếu chỉ định
một số không có đơn vị, thì nó là hệ số nhân,
nhân với giá trị của thuộc tính border-width.
Giá trị âm không được hỗ trợ.
Để biết thông tin chi tiết về hình ảnh
cho đường viền, hãy xem thuộc tính border-image.
Cú pháp
bộ chọn {
border-image-outset: số dương;
}
Ví dụ . Số
Đặt giá trị border-image-outset
là 3 khi di chuột vào phần tử.
Khi đó đường viền sẽ dịch chuyển ra 26px*3 -
gấp 3 lần so với độ rộng của nó, được đặt
trong border-width:
<div id="elem"></div>
#elem:hover {
border-image-outset: 3;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 100px auto;
}
:
Ví dụ . Pixel
Đặt giá trị border-image-outset
là 30px khi di chuột vào phần tử.
Khi đó đường viền sẽ dịch chuyển ra 30px:
<div id="elem"></div>
#elem:hover {
border-image-outset: 30px;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 50px auto;
}
:
Xem thêm
-
thuộc tính
border-image,
là thuộc tính viết tắt cho đường viền hình ảnh -
thuộc tính
border-image-source,
thiết lập đường dẫn đến hình ảnh cho đường viền -
thuộc tính
border-image-slice,
chỉ định cách cắt hình ảnh cho đường viền -
thuộc tính
border-image-repeat,
chỉ định cách lặp hình ảnh cho đường viền -
thuộc tính
border-image-width,
thiết lập kích thước hình ảnh cho đường viền