>  기사  >  웹 프론트엔드  >  CSS3의 일부 숨겨진 고급 속성의 혼합 속성 사용에 대한 자세한 설명

CSS3의 일부 숨겨진 고급 속성의 혼합 속성 사용에 대한 자세한 설명

伊谢尔伦
伊谢尔伦원래의
2017-07-19 10:52:042627검색

-webkit-user-select 및 -moz-user-select

아마도 저작권 문제 여부와 관계없이 사용자가 웹사이트에서 텍스트를 선택하는 것을 원하지 않는 경우가 있을 것입니다. 일반적으로 모든 사람은 이를 구현할 js를 가지고 있습니다. 또 다른 해결책은 -webkit-user-select 및 -moz-user-select 값을 없음으로 설정하는 것입니다.

이 속성을 주의해서 사용하세요. 대부분의 사용자는 나중에 사용할 수 있도록 복사하고 저장할 수 있는 정보를 보기 위해 여기에 있으므로 이 접근 방식은 유용하지도 효과적이지도 않습니다. 복사-붙여넣기를 비활성화해도 사용자는 소스 파일을 보고 원하는 것을 얻을 수 있습니다. 이 속성이 webkit과 gecko에서 지원되는 이유를 이해할 수 없습니다.

브라우저 지원: WebKit, Gecko.

-webkit-appearance 및 -moz-appearance

이미지를 라디오 버튼으로 위장하고 싶었던 적이 있습니까? 아니면 체크박스처럼 보이는 입력 상자인가요? 이제 모습이 나타납니다. 링크가 항상 버튼처럼 보이는 것을 원하지 않더라도 원하는 경우 이를 수행할 수 있는 방법을 보여주는 예는 다음과 같습니다.

Example

   a {
-webkit-appearance: button;
-moz-appearance: button;
}

브라우저 지원: WebKit, Gecko.

text-align: -moz-center/-webkit-center

이 속성(정확히 말하면 "속성 값")의 존재는 매우 놀랍습니다. 블록 수준 요소를 중앙에 배치하려면 일반적으로 margin:0 auto로 설정합니다. 그러나 이제 요소 컨테이너의 text-align 속성을 -moz-center 및 -webkit-center로 설정할 수도 있습니다. 그에 따라 -moz-left, -webkit-left 또는 -moz-right, -webkit-right를 설정하여 요소를 왼쪽이나 오른쪽으로 설정할 수도 있습니다.

브라우저 지원: WebKit, Gecko.

-webkit-tap-highlight-color

이 속성은 iOS(iPhone 및 iPad)에서만 사용됩니다. Javascript를 통해 정의된 링크나 클릭 가능한 요소를 클릭하면 반투명한 회색 배경으로 나타납니다. 이 동작을 재설정하려면 -webkit-tap-highlight-color를 원하는 색상으로 설정하면 됩니다.

이 강조 표시를 비활성화하려면 색상의 알파 값을 0으로 설정하세요.

예: 강조 색상을 50% 투명 빨간색으로 설정:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

브라우저 지원: iOS(iPhone 및 iPad)만 해당.

개요: none(1) PC에서 a 태그에 대해 이 스타일을 정의하는 목적은 IE 브라우저에서 a 태그를 클릭할 때 나타나는 점선을 취소하기 위한 것입니다. IE7 이하 브라우저는 아직 이 속성을 인식하지 못합니다. 크롬(3)에서 기본 텍스트 상자 포커스 스타일을 취소하려면 a 태그에 hidefocus="true"(2)input을 추가해야 합니다. 모바일 단말기에서는 사용할 수 없습니다. 텍스트 상자의 기본 스타일을 제거하려면 -webkit-appearance를 사용하여 초점을 맞출 때 -webkit-tap-highlight-color를 사용할 수 있습니다. 이 속성을 추가하는 일부 모바일 재설정 파일을 보았지만 실제로는 중복됩니다.

webkit-appearance -webkit-appearance: none; //입력 상자와 버튼의 기본 모양을 제거합니다. iOS에서는 이 속성을 추가해야만 버튼과 입력 상자의 스타일을 맞춤 설정할 수 있습니다. 참고: 이 속성을 사용한 후에는 입력 유형에 따라 다르게 동작합니다. 텍스트와 버튼에는 스타일이 없으며 라디오와 체크박스는 바로 사라집니다.

위 내용은 CSS3의 일부 숨겨진 고급 속성의 혼합 속성 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.