css 是否可以将border-radius应用于border-image？

6gpjuf90 于 2023-04-22 发布在其他

关注(0)|答案(1)|浏览(186)

我正在使用圆形边框（border-radius）对输入字段进行样式化，如下图所示。并试图向该边框添加渐变。然而，我尝试应用下面的代码或搜索结果，但不起作用。请告诉我如何做到这一点。

.container{
  background: #ffffff;
  box-shadow: 1px 1px 12px 3px rgba(108, 128, 147, 0.25);
  border-radius: 18px;
  border: 9px solid;
  border-image: linear-gradient(
      337.17deg,
      #00d4f1 10%,
      #6061c4 50%,
      #ffabed 100%
    )
    1;
}

<div class="container flex flex-col justify-start items-center w-3/12 pt-6 pb-7 pl-6 pr-6 relative">
</div>

css

来源：https://stackoverflow.com/questions/76079753/is-it-possible-to-apply-border-radius-to-border-image

1条答案

按热度按时间

goqiplq21#

我已经创建了一个如何使用纯CSS创建代码的示例。

.input-container {
  display: inline-block;
  position: relative;
  background: linear-gradient(337.17deg, #00d4f1 10%, #6061c4 50%, #ffabed 100%);
  border-radius: 18px;
  padding: 9px;
  overflow: hidden;
  height: 350px;
  width: 200px;
}

.gradient-border-input {
  display: block;
  width: calc(100% - 21px);
  height: calc(100% - 18px);
  background: #ffffff;
  border: none;
  outline: none;
  box-shadow: 1px 1px 12px 3px rgba(108, 128, 147, 0.25);
  border-radius: 18px;
  padding: 10px;
}

<div class="input-container">
  <input class="gradient-border-input" type="text" />
</div>

赞(0）回复(0）举报 2023-04-22

我来回答

css 是否可以将border-radius应用于border-image？

1条答案

相关问题

热门标签

最新问答