Có thể thêm hộp đổ bóng vào đầu vào trong biểu mẫu css không?

Question

Tôi đã cố gắng để thêm một số hiệu ứng snazzy để hộp đầu vào của tôi và người tôi tìm thấy được hộp shadowing, tôi nhìn vào w3schools hướng dẫn cho hộp shadowing và thử nhiều thứ để thêm nó vào hộp đầu vào của tôi:

.l_input { 
    box-shadow: 10px; 
} 

Điều đó dường như không hoạt động đối với mã của tôi. Tôi cũng cố gắng sử dụng nó sử dụng một hiệu ứng di chuột giả và nó lại không làm việc cho rằng, các mã giả tôi đã cố gắng thực hiện:

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

Và một lần nữa rằng dường như không làm việc, nếu điều này là đúng sự cú pháp để mã hoạt động như thế nào hoặc tôi đang làm một lỗi nhỏ nhờ trước, tôi đã nghĩ rằng có lẽ nó không được hỗ trợ cho các đầu vào, nhưng điều đó nghe có vẻ lạ.

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

Bạn có thể cho hộp bóng như cách sau:

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

Bạn nên cung cấp giá trị ít nhất là lần đầu tiên hai.

Đầu tiên hai mô tả bóng ngang và bóng dọc. Thứ ba là mờ và màu.

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

Reference link:

Working Fiddle

Và bạn có thể có hiệu lực cho bóng sau đường.

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

Fiddle

Answer 3

Nên làm việc với bên dưới code.If lớp học của bạn là .l_input sau đó nó sẽ được worked.Its phụ thuộc vào nhãn hiệu của bạn.

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

Nếu không được thì hãy thử mã dưới đây:

Bạn có thể nhìn thấy trong 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

Hãy thử này

.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">