微信小程序中button組件的邊框設(shè)置的實(shí)例詳解

微信小程序中button組件的邊框設(shè)置的實(shí)例詳解

在伊州等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、成都網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作按需網(wǎng)站建設(shè),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),全網(wǎng)營(yíng)銷(xiāo)推廣,成都外貿(mào)網(wǎng)站建設(shè)公司,伊州網(wǎng)站建設(shè)費(fèi)用合理。

button的邊框是用:after方式實(shí)現(xiàn)的，用戶如果在button上定義邊框會(huì)出現(xiàn)兩條線，需用:after的方式去覆蓋默認(rèn)值。
如果設(shè)置了Button的背景色，沒(méi)有用: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è)置了邊框的樣式，但是沒(méi)有生效。

修改：將.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)象

如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

文章題目：微信小程序中button組件的邊框設(shè)置的實(shí)例詳解
網(wǎng)站地址：http://muchs.cn/article12/ijojgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站制作、自適應(yīng)網(wǎng)站、軟件開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)