微信小程序:button组件的边框设置
来源:互联网 发布:淘宝200元和300元的鞋 编辑:程序博客网 时间:2024/06/06 06:11
button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值。
如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角。如下图所示:
如上图四个角会模糊。.wxss代码如下:
.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;}在这里设置了边框的样式,但是没有生效。
修改:将.wxss代码修改如下:
.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;}
将Button的边框设置放在::after属性里面。效果如下:
从上图可以看出,四个角不模糊了。
总结:对于button的边框设置,要放在::after里面设置,才生效,要不然会出现各种怪异现象
阅读全文
0 0
- 微信小程序:button组件的边框设置
- BUtton 圆角.边框的设置
- 设置Button的边框线的方法
- 设置button的边框颜色和宽度
- 设置button的边框和颜色
- 如何设置Button控件的边框颜色
- button设置边框
- 给button设置边框
- 微信小程序----组件之button
- Flash - textarea组件的背景边框设置
- 给view button 设置边框
- 设置button按钮边框颜色
- 组件边框设置
- xamarin.ios中设置button的边框及样式
- <小程序>修改button组件的样式
- button的边框
- 小程序button控件上下边框的显示和隐藏
- 微信小程序把玩(十四)button组件
- JAVA拆装箱问题到面向对象原理思考
- Python学习笔记(九) -- Python HttpClient使用requests库发送http消息
- EL表达式无效的解决方法
- 关于document.all.item()
- kNN_约会网站匹配效果改进实现代码
- 微信小程序:button组件的边框设置
- AndroidStudio Fir上传插件
- live555 源码分析:基础设施
- css控制文字颜色渐变
- Android中setRotation导致的问题
- WOJ1031-Chocolates
- windows 下配置faster r-cnn
- 大菠萝刷刷刷。
- 分布式事务之2PC和3PC