Settings for rounded borders in small programs

Article from: http://blog.csdn.net/beilinyu/article/details/54291321

Like the SS, fillets in small programs can be set by Border-radius .
For example, to set a rounded border, just add the following style:

border-radius:5px

You can achieve the following effects:

The difference is that in a small program you want to set only one of the fillets, while others are at right angles, you need to use Border-bottom-left-radius, Border-top-left-radius, Border-bottom-left-radius, Border-top-left-radius is set individually, using a similar CSS to write four values directly in the Border-radius property, such as: border-radius:5px,0px,0px,5px; It has no effect

The following is a case where the left half is rounded and the right half is at a straight angle:

border-bottom-left-radius:5px;
 border-top-left-radius:5px;

In addition, the button buttons in the applet have rounded corners,

So if you want to set only half of the display fillet, you need to set the following:

border-radius:0px;
 border-bottom-right-radius:5px;
 Border-top-right-radius:5px;3

The effect is as follows:

Thus we can create a search bar with rounded borders:

Wxml

   <view class= "Search-cell" >
      <view class= "WEUI-CELL__BD" >
        <input class= "Input-search" Placeholder= ""  value= "{{inputval}}"/>
      </view>
      <view class= "weui-cell__ft" >
        < Button class= "Btn-search" type= "PRIMARY" > Search </button>
      </view>
    </view>

Of course, for components without Borders, such as Label,view, be careful to use the Border property to show the effect of rounded borders.