Details of the Border Setting of the Button Components in the WeChat applet

Instance of the border setting of the Button component in the WeChat applet

Button’s border is implemented by: After mode, if the user will display two lines in the Button You need to override the default value in a manner.
If the background color of the Button is set, it is useless: After setting the color of the frame, the four angles of Button will appear blurred sharp corners. As shown in the figure below:

微信小程序中button组件的边框设置的实例详解 The four angles of the figure will be blurred. .wxss code as follows:

.Clickencryptbtn {Width: 130px; border-radius: 3px; margin: 20px auto; padding-top: 2px; font-size : 14px; Background-Color: # cc3333;

border: 1px solid # cc3333
color: white; overflow: hidden; height: 40px;}
    Set the style of the border here, but there is no effective.  

.ClickencryptBTN {Width: 130px; border-radius: 3px; margin : 20px auto; padding-top: 2px; font-size: 14px; Background-color: # cc3333; color: white; overflow: hidden; height: 40px;}

.clickencryptbtn :: after {Border: 1px solid # CC3333;}
  Place the border of the Button in :: after attribute .  The effect is as follows:  
As can be seen from the above figure, the four angles are unambiguous.

Summary : For the border settings of Button, put it in :: after setting, taking effect, or there will be various weird phenomena

If you have any questions, please leave a message or to this site community exchange discussion, thank you reading, I hope to help everyone, thank you for your support!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment