Question

蓝框周围有一条线。我怎样才能将其取出并获得干净的圆形盒子？我试过了

{  
    border: none;  
    outline: none;  
}

但它不起作用。我绕过角落，然后出现了一条线，当角落没有倒圆时，它似乎是轮廓。

这是我的css和html代码：

＆＃13;

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;
       }

＆＃13;

<!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>

＆＃13;

Answer 1

这是字段集，默认情况下它有一个边框。

fieldset {
    border: 0px;
}

您可以阅读有关form / fieldset / etc elements here

的样式的更多信息

Answer 2

fieldset {
  border: 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;
}

fieldset {
	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>

如何删除html和css中元素周围的边框线？

2 个答案: