>웹 프론트엔드 >CSS 튜토리얼 >CSS 스타일을 사용하여 아름다운 양식 스타일을 만드는 방법은 무엇입니까? (코드 예)

CSS 스타일을 사용하여 아름다운 양식 스타일을 만드는 방법은 무엇입니까? (코드 예)

藏色散人
藏色散人원래의
2018-08-13 17:44:588990검색

이 글에서는 주로 CSS 양식 스타일의 절묘한 제작 코드 방법을 소개합니다. 보기 좋은 양식 스타일은 웹사이트의 전반적인 효과에 매우 중요합니다. 사용자가 읽기에도 편리할 뿐만 아니라 웹마스터가 웹사이트를 관리하는 데에도 적합합니다.

절묘한 형태의 CSS 스타일 코드의 구체적인 예는 다음과 같습니다.

양식 코드:

<form class="form">  
  <p class="name">  
    <input type="text" name="name" id="name" />  
    <label for="name">Name<span>图</span><i>库</i></label>  
  </p>  
  <p class="email">  
    <input type="text" name="email" id="email" />  
    <label for="email">E-mail<span>图</span><i>库</i></label>  
  </p>  
  <p class="web">  
    <input type="text" name="web" id="web" />  
    <label for="web">Website<span>图</span><i>库</i></label>  
  </p>  
  <p class="text">  
    <textarea name="text"></textarea>  
  </p>  
  <p class="submit">  
    <input type="submit" value="Send" />  
  </p>  
</form>

css 스타일 코드:

input, textarea {    
 padding: 9px;   
 border: solid 1px #E5E5E5;   
 outline: 0;   
 font: normal 13px/100% Verdana, Tahoma, sans-serif;   
 width: 200px;   
 background: #FFFFFF url(&#39;bg_form.png&#39;) left top repeat-x;   
 background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));   
 background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);   
 box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;   
 -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;   
 -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;   
 }   
  
textarea {    
 width: 400px;   
 max-width: 400px;   
 height: 150px;   
 line-height: 150%;   
 }   
  
input:hover, textarea:hover,   
input:focus, textarea:focus {    
 border-color: #C9C9C9;    
 -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;   
 }   
  
.form label {    
 margin-left: 10px;    
 color: #999999;    
 }   
  
.submit input {   
 width: auto;   
 padding: 9px 15px;   
 background: #617798;   
 border: 0;   
 font-size: 14px;   
 color: #FFFFFF;   
 -moz-border-radius: 5px;   
 -webkit-border-radius: 5px;   
 }

효과는 다음과 같습니다.

CSS 스타일을 사용하여 아름다운 양식 스타일을 만드는 방법은 무엇입니까? (코드 예)

참고:

box- 그림자 속성이 상자에 추가됩니다. 하나 이상의 그림자. 이 속성은 쉼표로 구분된 그림자 목록으로, 각각 2~4개의 길이 값, 선택적 색상 값 및 선택적 inset 키워드로 지정됩니다. 생략된 길이의 값은 0입니다. border-image-* 속성을 사용하여 아름답고 확장 가능한 버튼을 만드세요!

가능한 값:

h-shadow 필수입니다. 수평 그림자의 위치입니다. 음수 값이 허용됩니다. ​​

v-shadow 필수입니다. 수직 그림자의 위치입니다. 음수 값이 허용됩니다.

흐림 선택사항. 퍼지 거리.

확산 선택사항. 그림자의 크기.

색상은 선택사항입니다. 그림자의 색상입니다.

삽입 선택사항. 외부 그림자(시작)를 내부 그림자로 변경

위는 CSS를 사용하여 양식 스타일을 디자인하는 방법에 대한 내용입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.

위 내용은 CSS 스타일을 사용하여 아름다운 양식 스타일을 만드는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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