如何去除html和css中元素周圍的邊框線？

-3

the line around the blue box 如何去除html和css中元素周圍的邊框線？

圍繞藍色框有一條線。我怎樣才能刪除它，只是得到乾淨的圓形框？我試過

{ 
    border: none; 
    outline: none; 
}

但它不起作用。我將角落四捨五入，然後出現的線條看上去是輪廓不圓時的輪廓線。

這裏是我的CSS和HTML代碼：

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>

來源

2016-08-18 saXat

你嘗試哪個元素從去除邊框的造型？ – Neil

它的Sign-In div元素。 – saXat

它的字段集，默認情況下它具有邊框。

fieldset { 
    border: 0px; 
}

您可以閱讀更多有關表格/字段集/等元素here

來源

2016-08-18 10:23:25 Roberrrt

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>

來源

2016-08-18 10:31:03

如何去除html和css中元素周圍的邊框線？

回答

相關問題