是否有可能將框陰影添加到表單css中的輸入？

Question

我一直在嘗試一些時髦的效果添加到我的輸入框和一個我發現了盒子陰影，我看着W3Schools的教程箱陰影，並試圖多的東西將它添加到我的輸入框：

.l_input { 
    box-shadow: 10px; 
} 

這似乎並沒有爲我的代碼工作。我也嘗試使用hover僞影響使用它，它再沒有爲工作，我試過的僞代碼做：

.l_input { 
    box-shadow: 5px; 
} 
.l_input:hover { 
    box-shadow: 10px; 
    transition: 2s; 
} 

又一次地似乎沒有工作，如果這是正確的語法代碼應該如何工作，或者我提前感謝了一個小錯誤，我認爲它可能不支持輸入，但聽起來很奇怪。

Answer 1

.l_input { 
 
    box-shadow: 0 1px 2px rgba(0,0,0,0.15); 
 
    transition: 0.3s ease-in-out; 
 
} 
 

 
/* hover effect */ 
 
.l_input:hover { 
 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
 
}

<div class="l_input"> Content <div>

Answer 2

你可以給箱子的影子像下面的樣子：

.l_input { 
    box-shadow: 5px 5px 5px #000; 
} 

你應該給至少前兩個值。

前兩個描述水平陰影和垂直陰影。第三個是模糊和顏色。

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; 

Reference link:

Working Fiddle

而且可以落實陰影下面的方式。

.l_input { 
box-shadow: 5px 5px 5px #000; 
} 
.l_input:hover { 
    box-shadow: 10px 10px 10px #000; 
    transition: 2s; 
} 

Fiddle

Answer 3

應該低於code.If進行加工類是.l_input那麼這將是worked.Its取決於你的商標。

.l_input { 
box-shadow: 5px 5px 5px #000; 
} 

如果沒有，那麼試試下面的代碼：

可以在JSFIDDLE看到。

body { 
 
    background: #ccc 
 
} 
 
.box h3 { 
 
    text-align: center; 
 
    position: relative; 
 
    top: 80px; 
 
} 
 
.box { 
 
    width: 70%; 
 
    height: 200px; 
 
    background: #FFF; 
 
    margin: 40px auto; 
 
} 
 
/*================================================== 
 
* Effect 1 
 
* ===============================================*/ 
 

 
.effect1 { 
 
    -webkit-box-shadow: 0 10px 6px -6px #777; 
 
    -moz-box-shadow: 0 10px 6px -6px #777; 
 
    box-shadow: 0 10px 6px -6px #777; 
 
} 
 
/*================================================== 
 
* Effect 2 
 
* ===============================================*/ 
 

 
.effect2 { 
 
    position: relative; 
 
} 
 
.effect2:before, 
 
.effect2:after { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 15px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    -webkit-box-shadow: 0 15px 10px #777; 
 
    -moz-box-shadow: 0 15px 10px #777; 
 
    box-shadow: 0 15px 10px #777; 
 
    -webkit-transform: rotate(-3deg); 
 
    -moz-transform: rotate(-3deg); 
 
    -o-transform: rotate(-3deg); 
 
    -ms-transform: rotate(-3deg); 
 
    transform: rotate(-3deg); 
 
} 
 
.effect2:after { 
 
    -webkit-transform: rotate(3deg); 
 
    -moz-transform: rotate(3deg); 
 
    -o-transform: rotate(3deg); 
 
    -ms-transform: rotate(3deg); 
 
    transform: rotate(3deg); 
 
    right: 10px; 
 
    left: auto; 
 
} 
 
/*================================================== 
 
* Effect 3 
 
* ===============================================*/ 
 

 
.effect3 { 
 
    position: relative; 
 
} 
 
.effect3:before { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 15px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    -webkit-box-shadow: 0 15px 10px #777; 
 
    -moz-box-shadow: 0 15px 10px #777; 
 
    box-shadow: 0 15px 10px #777; 
 
    -webkit-transform: rotate(-3deg); 
 
    -moz-transform: rotate(-3deg); 
 
    -o-transform: rotate(-3deg); 
 
    -ms-transform: rotate(-3deg); 
 
    transform: rotate(-3deg); 
 
} 
 
/*================================================== 
 
* Effect 4 
 
* ===============================================*/ 
 

 
.effect4 { 
 
    position: relative; 
 
} 
 
.effect4:after { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 15px; 
 
    right: 10px; 
 
    left: auto; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    -webkit-box-shadow: 0 15px 10px #777; 
 
    -moz-box-shadow: 0 15px 10px #777; 
 
    box-shadow: 0 15px 10px #777; 
 
    -webkit-transform: rotate(3deg); 
 
    -moz-transform: rotate(3deg); 
 
    -o-transform: rotate(3deg); 
 
    -ms-transform: rotate(3deg); 
 
    transform: rotate(3deg); 
 
} 
 
/*================================================== 
 
* Effect 5 
 
* ===============================================*/ 
 

 
.effect5 { 
 
    position: relative; 
 
} 
 
.effect5:before, 
 
.effect5:after { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 25px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    -webkit-box-shadow: 0 35px 20px #777; 
 
    -moz-box-shadow: 0 35px 20px #777; 
 
    box-shadow: 0 35px 20px #777; 
 
    -webkit-transform: rotate(-8deg); 
 
    -moz-transform: rotate(-8deg); 
 
    -o-transform: rotate(-8deg); 
 
    -ms-transform: rotate(-8deg); 
 
    transform: rotate(-8deg); 
 
} 
 
.effect5:after { 
 
    -webkit-transform: rotate(8deg); 
 
    -moz-transform: rotate(8deg); 
 
    -o-transform: rotate(8deg); 
 
    -ms-transform: rotate(8deg); 
 
    transform: rotate(8deg); 
 
    right: 10px; 
 
    left: auto; 
 
} 
 
/*================================================== 
 
* Effect 6 
 
* ===============================================*/ 
 

 
.effect6 { 
 
    position: relative; 
 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
} 
 
.effect6:before, 
 
.effect6:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    top: 50%; 
 
    bottom: 0; 
 
    left: 10px; 
 
    right: 10px; 
 
    -moz-border-radius: 100px/10px; 
 
    border-radius: 100px/10px; 
 
} 
 
.effect6:after { 
 
    right: 10px; 
 
    left: auto; 
 
    -webkit-transform: skew(8deg) rotate(3deg); 
 
    -moz-transform: skew(8deg) rotate(3deg); 
 
    -ms-transform: skew(8deg) rotate(3deg); 
 
    -o-transform: skew(8deg) rotate(3deg); 
 
    transform: skew(8deg) rotate(3deg); 
 
} 
 
/*================================================== 
 
* Effect 7 
 
* ===============================================*/ 
 

 
.effect7 { 
 
    position: relative; 
 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
} 
 
.effect7:before, 
 
.effect7:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 10px; 
 
    right: 10px; 
 
    -moz-border-radius: 100px/10px; 
 
    border-radius: 100px/10px; 
 
} 
 
.effect7:after { 
 
    right: 10px; 
 
    left: auto; 
 
    -webkit-transform: skew(8deg) rotate(3deg); 
 
    -moz-transform: skew(8deg) rotate(3deg); 
 
    -ms-transform: skew(8deg) rotate(3deg); 
 
    -o-transform: skew(8deg) rotate(3deg); 
 
    transform: skew(8deg) rotate(3deg); 
 
} 
 
/*================================================== 
 
* Effect 8 
 
* ===============================================*/ 
 

 
.effect8 { 
 
    position: relative; 
 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
} 
 
.effect8:before, 
 
.effect8:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    top: 10px; 
 
    bottom: 10px; 
 
    left: 0; 
 
    right: 0; 
 
    -moz-border-radius: 100px/10px; 
 
    border-radius: 100px/10px; 
 
} 
 
.effect8:after { 
 
    right: 10px; 
 
    left: auto; 
 
    -webkit-transform: skew(8deg) rotate(3deg); 
 
    -moz-transform: skew(8deg) rotate(3deg); 
 
    -ms-transform: skew(8deg) rotate(3deg); 
 
    -o-transform: skew(8deg) rotate(3deg); 
 
    transform: skew(8deg) rotate(3deg); 
 
}

<div class="box effect1"> 
 
    <h3>Effect 1</h3> 
 
</div> 
 

 
<div class="box effect2"> 
 
    <h3>Effect 2</h3> 
 
</div> 
 

 
<div class="box effect3"> 
 
    <h3>Effect 3</h3> 
 
</div> 
 

 
<div class="box effect4"> 
 
    <h3>Effect 4</h3> 
 
</div> 
 

 
<div class="box effect5"> 
 
    <h3>Effect 5</h3> 
 
</div> 
 

 
<div class="box effect6"> 
 
    <h3>Effect 6</h3> 
 
</div> 
 

 
<div class="box effect7"> 
 
    <h3>Effect 7</h3> 
 
</div> 
 

 
<div class="box effect8"> 
 
    <h3>Effect 8</h3> 
 
</div>

Answer 4

嘗試這個

.l_input { 
 
box-shadow: 3px 3px 2px #666; 
 
    transition: 0.2s all linear; 
 
    border:1px solid #999; 
 
} 
 

 
.l_input:hover { 
 
box-shadow: 0 5px 15px #666; 
 
transition: 0.2s all linear; 
 
}

<input type="text" class="l_input">