此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。
border-right-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
border-right-colorCSS 屬性設定元素右邊框的顏色。它也可以透過簡寫 CSS 屬性border-color 或border-right 來設定。
嘗試一下
border-right-color: red;border-right-color: #32a1ce;border-right-color: rgb(170 50 220 / 0.6);border-right-color: hsl(60 90% 50% / 0.8);border-right-color: transparent;<section> <div> 這是一個周圍有邊框的方塊。 </div></section>#example-element { background-color: #eee; color: #000; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}語法
css
/* <color> 值 */border-right-color: red;border-right-color: #ffbb00;border-right-color: rgb(255 0 0);border-right-color: hsl(100deg 50% 25% / 75%);border-right-color: currentcolor;border-right-color: transparent;/* 全域值 */border-right-color: inherit;border-right-color: initial;border-right-color: revert;border-right-color: revert-layer;border-right-color: unset;border-right-color 屬性被指定為單一值。
值
<color>右邊框的顏色。
形式定義
| 預設值 | currentcolor |
|---|---|
| Applies to | all elements. It also applies to::first-letter. |
| 繼承與否 | no |
| Computed value | computed color |
| Animation type | acolor |
形式語法
border-right-color =
<color>|
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes(<color-stripe>#)
<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?
<length-percentage> =
<length>|
<percentage>
範例
帶有邊框的 div
HTML
html
<div> <p> 這是一個周圍有邊框的方塊。請注意方塊的哪一側是<span >紅色</span >的。 </p></div>CSS
css
.my-box { border: solid 0.3em gold; border-right-color: red; width: auto;}.red-text { color: red;}結果
規範
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-color |
瀏覽器相容性
參見
- 與邊框相關的 CSS 簡寫屬性：
border、border-right和border-color。 - 其他邊框的顏色相關 CSS 屬性：
border-left-color、border-bottom-color和border-top-color。 - 適用於相同邊框的其他邊框相關 CSS 屬性：
border-right-style和border-right-width。 - 預設的
currentcolor顏色值。