微信小程序中button組件的邊框設(shè)置的實(shí)例詳解
更新時(shí)間：2017年09月27日 15:09:05 作者：tangxiujiang
這篇文章主要介紹了微信小程序中button組件的邊框設(shè)置的實(shí)例詳解的相關(guān)資料,希望通過本文大家能夠掌握這部分內(nèi)容，需要的朋友可以參考下
微信小程序中button組件的邊框設(shè)置的實(shí)例詳解
button的邊框是用:after方式實(shí)現(xiàn)的，用戶如果在button上定義邊框會(huì)出現(xiàn)兩條線，需用:after的方式去覆蓋默認(rèn)值。
如果設(shè)置了Button的背景色，沒有用:after設(shè)置邊框的顏色，則button的四個(gè)角會(huì)出現(xiàn)模糊的尖角。如下圖所示：
如上圖四個(gè)角會(huì)模糊。.wxss代碼如下：
.clickEncryptBtn{
width:130px;
border-radius: 3px;
margin:20px auto;
padding-top:2px;
font-size:14px;
background-color:#CC3333;
<strong> border:1px solid #CC3333</strong>
color:white;
overflow:hidden;
height:40px;
}
在這里設(shè)置了邊框的樣式，但是沒有生效。
修改：將.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;
}
<strong>.clickEncryptBtn::after{
border:1px solid #CC3333;
}</strong>
將Button的邊框設(shè)置放在::after屬性里面。
效果如下：
從上圖可以看出，四個(gè)角不模糊了。
總結(jié)：對(duì)于button的邊框設(shè)置，要放在::after里面設(shè)置，才生效，要不然會(huì)出現(xiàn)各種怪異現(xiàn)象
如有疑問請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
在計(jì)算機(jī)安全中,沙箱（Sandbox）是一種用于隔離正在運(yùn)行程序的安全機(jī)制,通常用于執(zhí)行未經(jīng)測(cè)試或不受信任的程序或代碼,它會(huì) 為待執(zhí)行的程序創(chuàng)建一個(gè)獨(dú)立的執(zhí)行環(huán)境,內(nèi)部程序的執(zhí)行不會(huì)影響到外部程序的運(yùn)行,下文我們來介紹一個(gè)“瀏覽器世界”的沙箱2021-10-10
父窗口獲取彈出子窗口文本框的值...2006-06-06
Javascript是一種基于對(duì)象（object-based）的語言，我們?cè)贘S中遇到的所有東西幾乎都是對(duì)象。但是，它又不是一種真正的面向?qū)ο缶幊陶Z言，因?yàn)樗恼Z法中沒有class（類）那么，如果我們要把"屬性"（property）和"方法"（method），封裝成一個(gè)對(duì)象2018-09-09
這篇文章主要為大家介紹了前端使用xlsx庫導(dǎo)出帶有樣式的excel文件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
微信小程序獲取用戶openId的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序獲取用戶openId的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-05-05
uniApp學(xué)習(xí)之熱門搜索，搜索數(shù)據(jù)頁面緩存實(shí)例
這篇文章主要介紹了uniApp學(xué)習(xí)之熱門搜索,搜索數(shù)據(jù)頁面緩存實(shí)例,需要的朋友可以參考下2023-10-10
微信小程序上滑加載下拉刷新（onscrollLower）分批加載數(shù)據(jù)（二）
這篇文章主要介紹了微信小程序上滑加載下拉刷新（onscrollLower）分批加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2017-05-05
微信小程序?qū)崿F(xiàn)錨點(diǎn)定位樓層跳躍的實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)錨點(diǎn)定位樓層跳躍的實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家介紹了前端算法leetcode49-字母異位詞分組解題示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
You-Dont-Know-JS詞法作用域及兩種常見的模型學(xué)習(xí)文檔
這篇文章主要為大家介紹了JS?詞法作用域及兩種常見的模型詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08