关于css边框透明、内容渐变色同时发生时出现的问题，具体问题不好描述，看看内容吧。
瞅瞅这左右边框，上下边框都正常，设置border的颜色为透明的白色（代码写的是鼠标在其上面时设置边框为透明的白色)的后就会这样并且会随着渐变色的角度的变化而变化，如图：
（这是45°的时候），不用渐变色就没事了，一开始还以为是background-image的问题，然而用图片测试了一下没问题。有没有大佬救救孩子。下面是代码（渐变色的设置在倒数第二个选择的里面）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录界面</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="image/02.jpg">
</head>
<body>
<div>
<form action="">
<h1>Login</h1>
<p class="p1">
<svg t="1620188120319" id="icon1" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3052" width="30" height="30"><path d="M432.56 527.168a150.192 150.192 0 0 1-73.6-129.248V342.24a150.256 150.256 0 0 1 300.512 0v55.664a150.176 150.176 0 0 1-72.048 128.32A344.432 344.432 0 0 1 824.736 718.4c2.56 5.552 7.232 11.2 7.232 16.928v4.784H832V829.92a16 16 0 0 1-16 16H208a16 16 0 0 1-16-16V749.904l0.32-0.032c0-5.28-0.032-10.656 0.336-16.096 0.368-5.408 4.416-10.608 6.8-15.792a344.432 344.432 0 0 1 233.104-190.816zM240 744.928v52.992h544v-53.008a296.16 296.16 0 0 0-544 0zM509.216 240a102.256 102.256 0 0 0-102.256 102.256v55.664a102.256 102.256 0 0 0 204.512 0V342.24A102.256 102.256 0 0 0 509.232 240z" p-id="3053" fill="#ffffff"></path></svg>
<input type="text" placeholder="username" id="username" onfocus="this.placeholder=''" onblur="this.placeholder='username'">
</p>
<p class="p2">
<svg t="1620188197911" id="icon2" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3572" width="30" height="30"><path d="M368 392v-65.392C368 243.712 432.16 176 512 176s144 67.712 144 150.608V392h144a16 16 0 0 1 16 16v416a16 16 0 0 1-16 16H224a16 16 0 0 1-16-16v-416a16 16 0 0 1 16-16h144z m48 0h192v-65.392C608 269.648 564.72 224 512 224s-96 45.664-96 102.608V392z m-160 48v352h512v-352H256z m280 144v80a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-80a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16z" p-id="3573" fill="#ffffff"></path></svg>
<input type="password" placeholder="password" id="password" onfocus="this.placeholder=''" onblur="this.placeholder='password'">
</p>
<p><input type="submit" value="登陆" id="login"></p>
</form>
</div>
</body>
</html>body {
margin: 0px;
padding: 0px;
border: 0px;
background-image: url(../image/background-image.png);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
}
div {
position: absolute;
top: 24%;
left: 36%;
background-color: #19242a;
opacity: 0.7;
border-radius: 25px;
padding: 50px 150px;
}
h1 {
text-align: center;
position: relative;
bottom: 40px;
font: bold 45px consolas;
color: aliceblue;
}
#icon1 {
position: absolute;
top: 163px;
left: 115px;
}
#icon2 {
position: absolute;
top: 210px;
left: 115px;
}
input {
height: 30px;
width: 230px;
border: 0;
background-color: #00000000;
border-bottom: 3px solid rgba(255, 255, 255, 0.5);
color: white;
font: large consolas;
}
input:focus {
opacity: 0.7;
}
#login {
height: 40px;
width: 150px;
display: block;
margin: 0 auto;
border: 0;
background-image: linear-gradient(45deg, #30cfd0 0%, #330867 100%);
border-radius: 20px;
}
#login:hover {
border: 10px solid rgba(255, 255, 255, 0.5);
}
是要实现什么效果
更新，修改了input为button，因为input对伪类兼容性不够好。边框使用伪类实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>登录界面</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="icon" href="image/02.jpg" />
<style>
body {
margin: 0px;
padding: 0px;
border: 0px;
background-image: url(../image/background-image.png);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
}
div {
position: absolute;
top: 24%;
left: 36%;
background-color: #19242a;
opacity: 0.7;
border-radius: 25px;
padding: 50px 150px;
}
h1 {
text-align: center;
position: relative;
bottom: 40px;
font: bold 45px consolas;
color: aliceblue;
}
#icon1 {
position: absolute;
top: 163px;
left: 115px;
}
#icon2 {
position: absolute;
top: 210px;
left: 115px;
}
input,
button {
height: 30px;
width: 230px;
border: 0;
background-color: #00000000;
border-bottom: 3px solid rgba(255, 255, 255, 0.5);
color: white;
font: large consolas;
}
input:focus {
opacity: 0.7;
}
#login {
height: 40px;
width: 150px;
display: block;
margin: 0 auto;
border: 0;
background-image: linear-gradient(45deg, #30cfd0 0%, #330867 100%);
border-radius: 20px;
position: relative;
}
#login::after {
content: "";
position: absolute;
left: 0;
top: 0;
border: 10px solid rgba(255, 255, 255, 0.5);
height: 40px;
width: 150px;
border-radius: 20px;
box-sizing: border-box;
transition: all ease-out .2s;
opacity: 0;
}
#login:hover::after {
opacity: 1;
}
</style>
</head>
<body>
<div>
<form action="">
<h1>Login</h1>
<p class="p1">
<svg
t="1620188120319"
id="icon1"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3052"
width="30"
height="30"
>
<path
d="M432.56 527.168a150.192 150.192 0 0 1-73.6-129.248V342.24a150.256 150.256 0 0 1 300.512 0v55.664a150.176 150.176 0 0 1-72.048 128.32A344.432 344.432 0 0 1 824.736 718.4c2.56 5.552 7.232 11.2 7.232 16.928v4.784H832V829.92a16 16 0 0 1-16 16H208a16 16 0 0 1-16-16V749.904l0.32-0.032c0-5.28-0.032-10.656 0.336-16.096 0.368-5.408 4.416-10.608 6.8-15.792a344.432 344.432 0 0 1 233.104-190.816zM240 744.928v52.992h544v-53.008a296.16 296.16 0 0 0-544 0zM509.216 240a102.256 102.256 0 0 0-102.256 102.256v55.664a102.256 102.256 0 0 0 204.512 0V342.24A102.256 102.256 0 0 0 509.232 240z"
p-id="3053"
fill="#ffffff"
></path>
</svg>
<input
type="text"
placeholder="username"
id="username"
onfocus="this.placeholder=''"
onblur="this.placeholder='username'"
/>
</p>
<p class="p2">
<svg
t="1620188197911"
id="icon2"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3572"
width="30"
height="30"
>
<path
d="M368 392v-65.392C368 243.712 432.16 176 512 176s144 67.712 144 150.608V392h144a16 16 0 0 1 16 16v416a16 16 0 0 1-16 16H224a16 16 0 0 1-16-16v-416a16 16 0 0 1 16-16h144z m48 0h192v-65.392C608 269.648 564.72 224 512 224s-96 45.664-96 102.608V392z m-160 48v352h512v-352H256z m280 144v80a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-80a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16z"
p-id="3573"
fill="#ffffff"
></path>
</svg>
<input
type="password"
placeholder="password"
id="password"
onfocus="this.placeholder=''"
onblur="this.placeholder='password'"
/>
</p>
<p>
<button type="submit" id="login">登录</button>
</p>
</form>
</div>
</body>
</html>
分开写试试？3个div，对中间的div 做鼠标事件监听来改变2测得div样式