border-color

# border-color

CSS 属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color、border-right-color、border-bottom-color、border-left-color。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 浏览器兼容性

Chrome	Edge	Firefox	Opera	Safari	IE
√（ 1 ）	√（ 12 ）	√（ 1 ）	√（ 3.5 ）	√（ 1 ）	√（ 4 ）

# 语法

border-color: <color>{1,4};

# border-color 的属性值

名称

兼容性

描述

color

使用 <color> 来表示四个边框的颜色，仅用于单值语法。

horizontal

使用 <color> 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。

vertical

使用 <color> 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。

top

使用 <color> 来表示上边框的颜色，仅用于三值或四值语法。

bottom

使用 <color> 来表示下边框的颜色，仅用于三值或四值语法。

right

使用 <color> 来表示右边框的颜色，仅用于四值语法。

left

使用 <color> 来表示左边框的颜色，仅用于四值语法。

inherit

这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。

# 示例

hello uni-app x

Template

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view style="flex-grow: 1">
      <view>
        <text>border-color: red</text>
        <view class="common" style="border-width: 5px; border-color: red; border-style: solid;"></view>
      </view>

      <view>
        <text>border-left-color: red</text>
        <view class="common" style="border-left-width: 5px; border-left-color: red; border-left-style:solid;"></view>
      </view>

      <view>
        <text>border-top-color: green</text>
        <view class="common" style="border-top-width: 5px; border-top-color: green; border-top-style: solid;"></view>
      </view>

      <view>
        <text>border-right-color: yellow</text>
        <view class="common" style="border-right-width: 5px; border-right-color: yellow; border-right-style: solid;">
        </view>
      </view>

      <view>
        <text>border-bottom-color: blue</text>
        <view class="common" style="border-bottom-width: 5px; border-bottom-color: blue; border-bottom-style: solid; ">
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style>
  .common {
    width: 250px;
    height: 250px;
    background-color: gray;
  }
</style>