2016-08-18 3 views
-3

the line around the blue boxhtml과 css에서 테두리 선을 제거하는 방법은 무엇입니까?

파란색 상자 주위에 선이 있습니다. 어떻게 제거하고 깨끗한 둥근 상자를 얻을 수 있습니까? 나는 시도했다

{ 
    border: none; 
    outline: none; 
} 

그러나 작동하지 않는다. 나는 모퉁이를 둥글게 만들었고, 모서리가 둥글지 않을 때 윤곽선처럼 보이는 선이 나타났다.

body,html{ 
 
     height: 100%; 
 
     color: #777;  
 
     line-height: 1.8; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
     
 
    .bgimg{ 
 
     background-image: url(room1.jpg); 
 
     min-height: 100%; 
 
     opacity: 0.2; 
 
     background-attachment: fixed; 
 
     background-position: center; 
 
     background-repeat: no-repeat; 
 
     background-size: cover;    
 
    } 
 

 
     .Sign-In{ 
 
      background-color: steelblue; 
 
      color: black; 
 
      opacity: 1; 
 
      position:absolute; 
 
      top:25%; 
 
      left:37%; 
 
      text-align: center; 
 
      border-radius: 15px; 
 
      font-family: cursive; 
 
      width: 300px; 
 
     } 
 
     
 
     .marg{ 
 
      margin-top: 15px; 
 
     } 
 

 
     #button{   
 
      margin-bottom: 15px; 
 
      padding: 10px; 
 
      margin-top: 30px; 
 
      border-radius: 10px;   
 
     } 
 

 
     .box{ 
 
      border-radius: 10px; 
 
      width: 200px; 
 
      text-align: center; 
 
      border: none; 
 
      height: 15px; 
 
     } 
 
     
 
    
<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
    <title>Sign-In</title> 
 
    <link rel="stylesheet" type="text/css" href="2.css"> 
 
    </head> 
 
    
 
    <body> 
 
    <div class="bgimg"> 
 
    </div> 
 
    <div class="Sign-In"> 
 
    <fieldset> 
 
    <h2>LOG-IN</h2> 
 
    <form method="POST" action=""> User <br> 
 
    <input type="text" name="user" size="40" class="box"> 
 
    <div class="marg"> Password </div> 
 
    <input type="password" name="pass" size="40" class="box"><br> 
 
    <input id="button" type="submit" name="submit" value="Log In"> 
 
    </form> 
 
    </fieldset> 
 
    </div> 
 
    </body> 
 
</html>

+0

의 스타일에 대한 자세한 내용을보실 수 있습니다? – Neil

+0

Sign-In div 요소입니다. – saXat

답변

2

그것은 그것은 기본적으로 테두리가의 필드 셋이다 :

은 여기 내 CSS와 HTML 코드입니다.

fieldset { 
    border: 0px; 
} 

당신은 양식/FIELDSET/등 요소 당신은에서 국경을 제거하려고 않았다 요소 here

0
fieldset { 
    border: none; 
} 

body,html{ 
 
\t height: 100%; 
 
\t color: #777;  
 
\t line-height: 1.8; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 

 
.bgimg{ 
 
\t background-image: url(room1.jpg); 
 
\t min-height: 100%; 
 
\t opacity: 0.2; 
 
\t background-attachment: fixed; 
 
\t background-position: center; 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover;    
 
} 
 

 
.Sign-In{ 
 
\t background-color: steelblue; 
 
\t color: black; 
 
\t opacity: 1; 
 
\t position:absolute; 
 
\t top:25%; 
 
\t left:37%; 
 
\t text-align: center; 
 
\t border-radius: 15px; 
 
\t font-family: cursive; 
 
\t width: 300px; 
 
} 
 

 
.marg{ 
 
\t margin-top: 15px; 
 
} 
 

 
#button{   
 
\t margin-bottom: 15px; 
 
\t padding: 10px; 
 
\t margin-top: 30px; 
 
\t border-radius: 10px;   
 
} 
 

 
.box{ 
 
\t border-radius: 10px; 
 
\t width: 200px; 
 
\t text-align: center; 
 
\t border: none; 
 
\t height: 15px; 
 
} 
 

 
fieldset { 
 
\t border: none; 
 
}
<div class="bgimg"> 
 
    </div> 
 
    <div class="Sign-In"> 
 
    <fieldset> 
 
    <h2>LOG-IN</h2> 
 
    <form method="POST" action=""> User <br> 
 
    <input type="text" name="user" size="40" class="box"> 
 
    <div class="marg"> Password </div> 
 
    <input type="password" name="pass" size="40" class="box"><br> 
 
    <input id="button" type="submit" name="submit" value="Log In"> 
 
    </form> 
 
    </fieldset> 
 
    </div>

관련 문제