border-style

# border-style

border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 语法

border-style: <line-style>{1,4};

# border-style 的属性值

名称

兼容性

描述

none

和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。

solid

显示为一条实线。

dashed

显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。

dotted

显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。

# 示例

hello uni-app x

Template

Script

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

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

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

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

      <view>
        <text>border-bottom-style: dotted</text>
        <view class="common" style="border-bottom-width: 5px; border-bottom-style: dotted"></view>
      </view>

      <view>
        <text>border-style: solid (缺省 border-width)</text>
        <view class="common" style="border-style: solid;"></view>
      </view>

      <view>
        <text>border-style: none</text>
        <view class="common" style="border-style: none; border-width: 5px;"></view>
      </view>

      <view @click="changeBorderStyle">
        <text>border-style: 点击切换</text>
        <view class="common" :style="borderStyle"></view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>



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