위 챗 애플 릿 에서 button 구성 요소 의 테두리 설정 인 스 턴 스 상세 설명

위 챗 애플 릿 에서 button 구성 요소 의 테두리 설정 인 스 턴 스 상세 설명
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; 
 <strong> border:1px solid #CC3333</strong> 
 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; 
} 
 
<strong>.clickEncryptBtn::after{ 
 border:1px solid #CC3333; 
}</strong> 

Button 의 테 두 리 를:after 속성 에 설정 합 니 다.
효 과 는 다음 과 같 습 니 다:

위의 그림 에서 보 듯 이 네 개의 각 이 모호 하지 않다.
요약:button 의 테두리 설정 에 대해 서 는:after 안에 설정 해 야 효력 이 발생 합 니 다.그렇지 않 으 면 각종 기괴 한 현상 이 발생 할 수 있 습 니 다.
궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기