主页 / 问题 / 776424
Accepted
user281117
Asked:2020-01-27 21:16:43 +0000 UTC2020-01-27 21:16:43 +0000 UTC

边框不圆

  • 772

我设置了一个渐变border，属性border-radius停止工作

input {
  width: 235px;
  padding: 10px 0px 10px 0px;
  background-color: rgba(0, 0, 0, 0);
  margin-top: 35px;
  border: 1px solid transparent;
  border-image-source: linear-gradient(1deg, #b5b748, #6ac248);
  border-image-slice: 1;
  border-radius: 50%;
}

input:focus {
  outline: 0;
  outline-offset: 0;
}

input.background-form__input_2 {
  float: right;
}
<form action="">
  <input class="background-form__input_1" type="name">
  <input class="background-form__input_2" type="telephone">
</form>

在此处输入图像描述

html

2 个回答

  1. 这是或多或少正确的代码：

    .rounded-corners-gradient-borders {
  border: double 4px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #b5b748,#6ac248);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
    <form action="">
  <input class="rounded-corners-gradient-borders" type="name">
  <input class="rounded-corners-gradient-borders" type="telephone">
</form>

    • 3
  2. Best Answer

    选项马马虎虎，但很有效

    label{
  display:inline-block;
  padding:1px;
  background:linear-gradient(1deg, #b5b748, #6ac248);
  margin-top:35px;
  border-radius:20px;
  float:left;
  clear:both;
}
input {
  display:block;
  width: 235px;
  padding: 10px;
  border-radius:inherit;
  border:none;
  margin:0;
}

input:focus {
  outline: none;
}
    <form action="">
  <label><input class="background-form__input_1" type="name"></label>
  <label><input class="background-form__input_2" type="telephone"></label>
</form>

    • 2

相关问题