CSS中的border-inline屬性用於在樣式表中的單個位置設置單個邏輯塊內聯邊框屬性值。它設置定義元素的內聯border-top(左)和底部(右)。
用法:
border-inline:border-width| border-style| border-color;
屬性值:
- border-width:該屬性值保存屬性的寬度。
- border-style:此屬性包含可以為虛線,實線等的邊框樣式。
- border-color:此屬性保留邊框的顏色。
以下示例說明了CSS中的border-inline屬性:
範例1:
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-inline Property</title>
<style>
h1 {
color:green;
}
div {
background-color:yellow;
width:220px;
height:40px;
}
.one {
border-inline:5px solid yellow;
background-color:purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | border-inline Property</b>
<br><br>
<div class="one">A Computer Science Portal</div>
</center>
</body>
</html>
輸出:
範例2:
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-inline Property</title>
<style>
h1 {
color:green;
}
div {
background-color:yellow;
width:220px;
height:40px;
}
.one {
border-inline:5px dashed yellow;
background-color:purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | border-inline Property</b>
<br><br>
<div class="one">A Computer Science Portal</div>
</center>
</body>
</html>
輸出:
支持的瀏覽器:下麵列出了border-inline屬性支持的瀏覽器:
- Firefox
- Opera
- Edge
相關用法
- CSS transition-property用法及代碼示例
- CSS all屬性用法及代碼示例
- CSS right屬性用法及代碼示例
- CSS nav-right用法及代碼示例
- CSS nav-down用法及代碼示例
- CSS nav-up用法及代碼示例
- CSS top屬性用法及代碼示例
- CSS zoom屬性用法及代碼示例
- HTML DOMRect right用法及代碼示例
- CSS resize屬性用法及代碼示例
- CSS align-self用法及代碼示例
- HTML DOMRectReadOnly y用法及代碼示例
- CSS clear屬性用法及代碼示例
- CSS bleed屬性用法及代碼示例
- CSS quotes屬性用法及代碼示例
注:本文由純淨天空篩選整理自skyridetim大神的英文原創作品 CSS | border-inline Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。