微信小程序中button組件的邊框設(shè)置的實例詳解
更新時間：2017年09月27日 15:09:05 作者：tangxiujiang
這篇文章主要介紹了微信小程序中button組件的邊框設(shè)置的實例詳解的相關(guān)資料,希望通過本文大家能夠掌握這部分內(nèi)容，需要的朋友可以參考下
微信小程序中button組件的邊框設(shè)置的實例詳解
button的邊框是用:after方式實現(xiàn)的，用戶如果在button上定義邊框會出現(xiàn)兩條線，需用:after的方式去覆蓋默認值。
如果設(shè)置了Button的背景色，沒有用:after設(shè)置邊框的顏色，則button的四個角會出現(xiàn)模糊的尖角。如下圖所示：
如上圖四個角會模糊。.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屬性里面。
效果如下：
從上圖可以看出，四個角不模糊了。
總結(jié)：對于button的邊框設(shè)置，要放在::after里面設(shè)置，才生效，要不然會出現(xiàn)各種怪異現(xiàn)象
如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要為大家介紹了TypeScript順時針打印矩陣實現(xiàn)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了瀏覽器切換到其他標簽頁或最小化是js定時器是否準時的測試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 toast 詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-11-11
用Move.js配合創(chuàng)建CSS3動畫的入門指引
這篇文章主要介紹了用Move.js配合創(chuàng)建CSS3動畫的入門指引,文中介紹了這個JavaScript庫中的一些基本方法的使用,需要的朋友可以參考下2015-07-07
這篇文章主要為大家介紹了JS?class語法糖的深入剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
JavaScript中MutationObServer監(jiān)聽DOM元素詳情
這篇文章主要給大家分享的是?JavaScript中MutationObServer監(jiān)聽DOM元素詳情，DOM的MutationObServer接口，可以在DOM被修改時異步執(zhí)行回調(diào)函數(shù)，我的理解就是可以監(jiān)聽DOM修改。下面來看看文章的詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
ECharts框架Sunburst拖拽功能實現(xiàn)方案詳解
這篇文章主要為大家介紹了ECharts框架Sunburst拖拽功能實現(xiàn)方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了微信小程序（應用號）開發(fā)新聞客戶端實例的相關(guān)資料,需要的朋友可以參考下2016-10-10
旨在把一個運行時間比較長的任務分解成一塊一塊比較小的任務，分塊去執(zhí)行，因為超過 50ms 的任務就會被認為是 long task，用戶就能感知到渲染卡頓和交互的卡頓，所以我們可以縮短函數(shù)的連續(xù)執(zhí)行時間2022-07-07
這篇文章主要介紹了微信小程序 radio單選框組件詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01