Question

我对盒子阴影不太熟悉，我想为我的网站创建一个只有底部阴影的文本字段，这是代码的样子：

input[type="text"], input[type="email"],  textarea{ box-shadow: 0 0 0 1.5px, 0 1px 0 rgba(0,0,0,0.08) inset}

此代码生成文本区域和文本区域的完整阴影框，我只希望底部部分获取阴影框，我已经看到box-shadow bootom solution但我不知道该怎么做

Answer 1

在css中使用底部阴影

.one-edge-shadow {
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}

Answer 2

此代码将为所有元素添加所有浏览器的底部阴影，

-webkit-box-shadow: 0px 11px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 11px 5px 0px rgba(0,0,0,0.75);

Answer 3

尝试以下代码，为输入和文本区域创建底部阴影，并使用:focus代替:active。

input[type="text"], input[type="email"],  textarea{ 
border:none;
box-shadow:1px 1px 10px 5px rgba(1,1,1,0.2);
transition: 0.6s ease;
}

input[type="text"]:focus, input[type="email"]:focus,  textarea:focus{ 
box-shadow:0px 10px 10px -8px rgba(1,1,1,0.8);
}

＆＃13;

input[type="text"], input[type="email"],  textarea{ 
border:none;
box-shadow:1px 1px 10px 5px rgba(1,1,1,0.2);
transition: 0.6s ease;
margin-bottom:50px;
float:left;
width:100%;
height:20px;
}
textarea{
height:150px;
}
input[type="text"]:focus, input[type="email"]:focus,  textarea:focus{ 
box-shadow:0px 10px 10px -8px rgba(1,1,1,0.8);
}

＆＃13;

<input type="text">
<input type="email">
<textarea></textarea>

＆＃13;

Answer 4

试试这个。我在How to make shadow on border-bottom?

上找到了这个

 div{
        -webkit-box-shadow:0px 1px 1px #de1dde;
         -moz-box-shadow:0px 1px 1px #de1dde;
         box-shadow:0px 1px 1px #de1dde;
          }
        <div>wefwefwef</div>

Box Shadow仅适用于textfield底部

4 个答案: