CSS3의 모양 속성을 사용하여 요소의 모양을 변경하는 방법

이 글에서는 주로 CSS3의 Appearance 속성을 사용하여 요소의 모양을 변경하는 방법을 소개합니다. 이는 특정 참조 값을 가지고 있습니다. 이제 필요한 친구들이 이를 참조할 수 있습니다.

각 브라우저가 HTML 요소를 렌더링한다는 것은 누구나 알고 있습니다. 예를 들어 Chrome과 FF의 버튼 렌더링 효과가 다릅니다. 이는 오늘날의 아이디어로 이어집니다. 요소에 대한 브라우저의 기본 렌더링 스타일을 사용하면 모양 속성을 사용하여 모든 요소의 렌더링 스타일을 변경할 수 있습니다. 얼마 전 "iPhone의 제출 버튼 버그 수정"에서 이 사용법이 소개되었습니다. -webkit-appearance: none; " iPhone에 있는 버튼의 기본 스타일을 변경합니다. 실제로 우리는 아이디어를 뒤집어 "appearance" 속성을 사용하여 모든 요소의 브라우저 기본 스타일을 변경할 수 있습니다. "appearance" 속성은 "단락 p"를 버튼 스타일이나 "입력 상자", "선택 상자" 및 기타 효과로 렌더링합니다.

각 브라우저가 HTML 요소를 다르게 렌더링한다는 것은 누구나 알고 있습니다. 예를 들어 Chrome과 FF에서는 '버튼'의 렌더링 효과가 다릅니다. 이는 오늘날의 아이디어로 이어집니다. 요소에 대한 브라우저의 기본 렌더링 스타일을 사용하면 "appearance" 속성을 사용하여 모든 요소의 렌더링 스타일을 변경할 수 있습니다. 가장 간단한 용어로 "a" 링크를 기본값으로 설정하고 싶습니다. 버튼' 스타일을 사용하면 '버튼'으로 설정된 '모양'을 사용할 수 있습니다.

"외관" 기능은 꽤 훌륭해 보이지만 안타깝게도 각 브라우저 제조업체는 현재 독립적으로 운영되며 통일된 표준에 도달할 수 없습니다. 현재까지 두 가지 핵심 브라우저만 사용할 수 있으며 그 중 하나는 "webkit"입니다. ff"는 "외관"을 사용할 때 각 브라우저 팩토리의 접두사를 추가해야 함을 의미합니다.
외관 사용 방법:

.elmClass{   
   -webkit-appearance: value;   
   -moz-appearance:    value;   
   appearance:         value;   
}

간단한 예를 살펴보겠습니다.

<p class="lookLikeAButton">我是一个段落P元素 </p>  
<p class="lookLikeAListbox">我是一个段落P元素 </p>  
<p class="lookLikeAListitem">我是一个段落P元素 </p>  
<p class="lookLikeASearchfield">我是一个段落P元素 </p>  
<p class="lookLikeATextarea">我是一个段落P元素 </p>  
<p class="lookLikeAMenulist">我是一个段落P元素</p>

다음으로 "appearance" 속성을 사용하여 위의 "P" 요소 스타일을 변경합니다.

/*看起来像个按钮，以按钮的风格渲染*/   
.lookLikeAButton{   
     -webkit-appearance:button;   
     -moz-appearance:button;   
}   
/*看起来像个清单盒子，以listbox风格渲染*/   
.lookLikeAListbox{   
     -webkit-appearance:listbox;   
     -moz-appearance:listbox;   
}   
/*看起来像个清单列表，以listitem风格渲染*/   
.lookLikeAListitem{   
     -webkit-appearance:listitem;   
     -moz-appearance:listitem;   
}   
/*看起来像个搜索框，以searchfield风格渲染*/   
.lookLikeASearchfield{   
     -webkit-appearance:searchfield;   
     -moz-appearance:searchfield;   
}   
/*看起来像个文本域，以textarea风格渲染*/   
.lookLikeATextarea{   
     -webkit-appearance:textarea;   
     -moz-appearance:textarea;   
}   
/*看起来像个下接菜单，以menulist风格渲染*/   
.lookLikeAMenulist{   
     -webkit-appearance:menulist;   
     -moz-appearance:menulist;   
}

"appearance" 속성을 전달합니다. 값 설정 후 그림과 같이 단락 P의 기본 스타일이 변경됩니다.

물론 위 속성은 참고용으로 웹킷 및 Mozilla에서 모양을 수집했습니다.


Webkit
의 모양 속성 값

checkbox
radio
push-button
square-button
button
button-bevel
listbox
listitem
menulist
menulist-button
menulist-text
menulist-textfield
scrollbarbutton-up
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
caret
searchfield
searchfield-decoration
searchfield-results-decoration
searchfield-results-button
searchfield-cancel-button
textfield
textarea

Mozilla의 모양 속성 값

none
button
checkbox
checkbox-container
checkbox-small
dialog
listbox
menuitem
menulist
menulist-button
menulist-textfield
menupopup
progressbar
radio
radio-container
radio-small
resizer
scrollbar
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbarbutton-up
scrollbartrack-horizontal
scrollbartrack-vertical
separator
statusbar
tab
tab-left-edge Obsolete
tabpanels
textfield
textfield-multiline
toolbar
toolbarbutton
toolbox
-moz-mac-unified-toolbar
-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox
-moz-win-communications-toolbox
-moz-win-glass
-moz-win-media-toolbox
tooltip
treeheadercell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
treeview
window

관심이 있으시면 다음 관련 소개를 살펴보세요.

Mozilla Docs for -moz -appearance
Webkit Appearance의 Trent Walton
Shaun Inman의 iPad에서 텍스트 입력의 내부 텍스트 그림자 비활성화
CSS3 Spec
CSS 속성: -webkit-appearance
드디어, 알림, "모양"은 현재 IE 시리즈 및 Opera 브라우저에서 지원되지 않으며 Safari는 버전 3.0 이상에서만 지원되지만 Chrome, Firefox 및 모바일 설정 브라우저에서 더 잘 지원됩니다. 이에 관심이 있으신 분은 위의 속성 값을 하나씩 개인적으로 시도해 보시고 이것이 모든 사람에게 어떤 효과를 가져오는지 확인하실 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS3의 일반적인 변환 그래픽 변경 사용 정보

프레임별 애니메이션 효과를 얻기 위한 CSS3 애니메이션 정보

위 내용은 CSS3의 모양 속성을 사용하여 요소의 모양을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!