CSS3 输入框阴影效果及其他阴影效果

最新推荐文章于 2025-06-19 16:21:12 发布

翻译最新推荐文章于 2025-06-19 16:21:12 发布 · 2.2k 阅读

css3 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用CSS为网页元素添加各种阴影效果，包括简单的外阴影、带有颜色变化的复杂阴影以及内阴影等。通过实际代码示例展示了不同阴影属性的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS:
form,p { margin-bottom:30px; margin-left:20px;}
.shadow,.one,.two,.three,.four,.five,.six{
height:50px;
width:280px;
border:1px solid #CCC;
}
.shadow {
-moz-box-shadow: inset 0 0 10px #CCC;
-webkit-box-shadow: inset 0 0 10px #CCC;
box-shadow: inset 0 0 10px #CCC;
}
.one （
-moz-box-shadow:5px 5px;
-webkit-box-shadow:5px 5px;
box-shadow:5px 5px;
}
.two {
-moz-box-shadow:2px 2px 10px #06c;
-webkit-box-shadow:2px 2px 10px #06c;
box-shadow:2px 2px 10px #06c;
}
.three {
-moz-box-shadow:0 0 10px #06c;
-webkit-box-shadow:0 0 10px #06c;
box-shadow:0 0 10px #06c;
}
.four {
-moz-box-shadow:0 0 10px 10px #06c;
-webkit-box-shadow:0 0 10px 10px #06c;
box-shadow:0 0 10px 10px #06c;
}
.five{
-moz-box-shadow:inset 5px 5px 10px #06c;
-webkit-box-shadow: inset 5px 5px 10px #06c;
box-shadow: inset 5px 5px 10px #06c;
}
.six {
-moz-box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;
    -webkit-box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;
    box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;
}

HTML:
（form）
输入框内阴影（input class="shadow" type="text" name="name" /）
（/form）
（p class="one"）简单效果:（/p）
（p class="two"）虚阴影效果:（/p）
（p class="three"）渐变阴影效果:（/p）
（p class="four"）带光晕效果:（/p）

（p class="five"）内阴影效果:（/p）