帅帅付 2021-05-05 15:14 采纳率: 100%
浏览 141
已采纳

关于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);
}
  • 写回答

2条回答 默认 最新

  • iMingzhen 2021-05-06 15:46
    关注

    是要实现什么效果

    更新，修改了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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥20 测距传感器数据手册i2c
  • ¥15 RPA正常跑，cmd输入cookies跑不出来
  • ¥15 求帮我调试一下freefem代码
  • ¥15 matlab代码解决，怎么运行
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法