<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-color: #00FF00</text>
        <view class="common" style="border-width: 5px; border-color: #00FF00; border-style: solid;"></view>
      </view>

      <view>
        <text>border-color: rgb(0,0,255)</text>
        <view class="common" style="border-width: 5px; border-color: rgb(0,0,255); border-style: solid;"></view>
      </view>

      <view>
        <text>border-color: rgba(0,255,255,0.5)</text>
        <view class="common" style="border-width: 5px; border-color: rgba(0,255,255,0.5); 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>
