CSS3을 사용하여 입력 입력 상자의 색상 그라데이션 글로우 효과를 얻는 방법

이 글은 입력 상자의 색상 그라데이션 글로우 효과를 얻기 위해 CSS3를 사용하는 방법을 주로 소개합니다. 이제 특정 참조 값이 있으므로 이를 참조할 수 있습니다.

css3이 출시되었습니다. 오랫동안 주요 주류 브라우저, 특히 IE는 호환되지 않지만... 그러나 -moz- -webkit-과 같은 접두사를 추가하면 Chrome 및 Firefox에서 더 나은 결과를 얻을 수 있거나 Transition을 통해 달성되는 전환 효과를 얻을 수 있습니다.

테두리까지 클릭 색상 그라데이션 효과를 얻으려면 단순한 상자 그림자 속성이 아니라 주변의 균일한 빛과 같은 느린 빛 전환 효과도 포함됩니다.

계속 배우기 전에 CSS3에 대한 기본 지식이 있어야 합니다. 이 모든 작업을 수행하려면 CSS3의 Shadow, RGBa 및 Transition 속성을 이해해야 합니다. 그렇지 않으면 이해할 수 없습니다.

1 빛나는 테두리 텍스트 상자 효과 만들기

<input type="text" class="sdw" />

그런 다음 이 입력 구성 요소에 초점을 맞추면(클릭) 파란색으로 나타나도록 합니다.

sdw:focus{
transition:border linear .2s,box-shadow linear .5s;
-moz-transition:border linear .2s,-moz-box-shadow linear .5s;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
outline:none;border-color:rgba(93,149,242,.75);
box-shadow:0 0 8px rgba(93,149,242,.105);
-moz-box-shadow:0 0 8px rgba(93,149,242,.5);
-webkit-box-shadow:0 0 8px rgba(93,149,242,3);
}

바로 그거예요. RGB 색상은 개인 취향에 따라 변경될 수 있습니다.

2. 모든 입력 구성 요소에 전역적으로 테두리 광선 효과 추가

웹 페이지의 모든 텍스트 입력 상자에 이 효과를 적용하려면 CSS를 사용하여 전역적으로 설정하면 됩니다.

다음 문장을 CSS 파일에 추가하세요:

input[type=text]:focus,input[type=password]:focus,textarea:focus{}

위 내용은 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요.

관련 권장 사항:

CSS3을 사용하여 간단한 3D 반투명 큐브 그림을 만드는 방법

IE 필터와 함께 CSS3를 사용하여 그라데이션 및 그림자 효과를 얻는 방법

위 내용은 CSS3을 사용하여 입력 입력 상자의 색상 그라데이션 글로우 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!