小编rah*_*tel的帖子

CSS中有4个渐变边框

我需要帮助在框的所有4个边上应用渐变边框.我尝试过,但它只适用于双方.在查看所有链接和SO答案后,我得到了这个:

.test{
  height:250px;
  border: 2px solid;
  border-image: linear-gradient(to left,rgba(78,137,176,1)  1%, rgba(115,192,85,1)  100%) 100% 0 100% 0/2px 0 2px 0;
  padding-top:50px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="test">
  This is a box and I want borders for all the sides
</div>

Run Code Online (Sandbox Code Playgroud)

我将不胜感激任何帮助.我正在尝试类似于下图的内容.谢谢.

html css border linear-gradients css3

rah*_*tel

2017 02-21

4
推荐指数

1
解决办法

8709
查看次数

如果需要，CSS 输入效果不起作用，已删除

如果输入标签中有需要，标签效果将起作用。但如果我删除所需的属性，效果将不起作用单击查看工作小提琴是否有任何解决方案。

html

<div class="group ">
<input type="text" required="" class="module-input" />
<label >Name</label>
</div>

Run Code Online (Sandbox Code Playgroud)

片段：

<div class="group ">
<input type="text" required="" class="module-input" />
<label >Name</label>
</div>

Run Code Online (Sandbox Code Playgroud)

.module-input {
  font-size: 14px;
  padding-top: 12px;
  display: block;
  width: 97%;
  border: none;
  border-bottom: 1px solid #94a3a9;
  background-color: transparent;
  color: #5a686d;
  margin-bottom: 2%;
}

input:focus {
  outline: none;
}

.group {
  position: relative;
  margin-bottom: 25px;
}


/* LABEL */

label {
  color: #94a3a9;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0.5%;
  top: …

Run Code Online (Sandbox Code Playgroud)

html css

rah*_*tel

2017 04-07

4
推荐指数

1
解决办法

2158
查看次数