微信小程序中button組件的邊框設(shè)置的實(shí)例詳解
微信小程序中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)文章
TypeScript順時(shí)針打印矩陣實(shí)現(xiàn)實(shí)例詳解
這篇文章主要為大家介紹了TypeScript順時(shí)針打印矩陣實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
瀏覽器切換到其他標(biāo)簽頁或最小化js定時(shí)器是否準(zhǔn)時(shí)測試
這篇文章主要為大家介紹了瀏覽器切換到其他標(biāo)簽頁或最小化是js定時(shí)器是否準(zhǔn)時(shí)的測試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 toast 詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-11-11
用Move.js配合創(chuàng)建CSS3動(dòng)畫的入門指引
這篇文章主要介紹了用Move.js配合創(chuàng)建CSS3動(dòng)畫的入門指引,文中介紹了這個(gè)JavaScript庫中的一些基本方法的使用,需要的朋友可以參考下2015-07-07
這篇文章主要為大家介紹了JS?class語法糖的深入剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
JavaScript中MutationObServer監(jiān)聽DOM元素詳情
這篇文章主要給大家分享的是?JavaScript中MutationObServer監(jiān)聽DOM元素詳情，DOM的MutationObServer接口，可以在DOM被修改時(shí)異步執(zhí)行回調(diào)函數(shù)，我的理解就是可以監(jiān)聽DOM修改。下面來看看文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
ECharts框架Sunburst拖拽功能實(shí)現(xiàn)方案詳解
這篇文章主要為大家介紹了ECharts框架Sunburst拖拽功能實(shí)現(xiàn)方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
微信小程序（應(yīng)用號(hào)）開發(fā)新聞客戶端實(shí)例
這篇文章主要介紹了微信小程序（應(yīng)用號(hào)）開發(fā)新聞客戶端實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10
JS時(shí)間分片技術(shù)解決長任務(wù)導(dǎo)致的頁面卡頓
旨在把一個(gè)運(yùn)行時(shí)間比較長的任務(wù)分解成一塊一塊比較小的任務(wù)，分塊去執(zhí)行，因?yàn)槌^ 50ms 的任務(wù)就會(huì)被認(rèn)為是 long task，用戶就能感知到渲染卡頓和交互的卡頓，所以我們可以縮短函數(shù)的連續(xù)執(zhí)行時(shí)間2022-07-07
這篇文章主要介紹了微信小程序 radio單選框組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01