CSS3의 모양 속성을 사용하여 요소의 모양을 변경하는 방법-CSS 튜토리얼-php.cn

이 글에서는 주로 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元素

로그인 후 복사

다음으로 "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

로그인 후 복사

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

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