笔记-CSS3实现3D搜索输入框

最新推荐文章于 2022-08-01 17:19:03 发布

crper

最新推荐文章于 2022-08-01 17:19:03 发布

阅读量2.6k

点赞数 1

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 CSS3及HTML5折腾记文章标签： CSS3按钮 3D输入框 CSS3-3D

本文链接：https://blog.csdn.net/crper/article/details/47755265

版权

这篇博客介绍了如何使用CSS3来创建3D效果的搜索输入框，包括盒子阴影、渐变、圆角和文本阴影等技术的应用，通过代码实现和效果展示，详细解析了制作过程。

摘要由CSDN通过智能技术生成

题外话

今天拜读了大漠的<<图解CSS3>>发现里面这个按钮的实例挺赞的,稍微完善了一下原来例子.
去掉一些现在不用的前缀,补全了最终版的.clearfix,还有样式稍作修改~~

原版效果图:

效果图

预备知识

基础布局知识
CSS2.1 && CSS3

制作原理(CSS3特性)

box-shadow - 盒子阴影,使用多层阴影达到立体效果
box-image:linear-gradient : 渐变效果实现…
box-radius - 实现圆角效果
text-shadow - 文本阴影

其他的都是CSS2.1的属性,就不用多说了…

代码实现

因为代码量不是很多,就木有分离CSS了…

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>制作3D搜索表单</title>
		<style>
			.clearfix:before,
			.clearfix:after {
    
				content: "";
				display: table;
			}
			.clearfix:after {
    
				clear: both;
				overflow: hidden;
			}

			#formWrapper {
    
				margin:0 auto;
				width: 650px;
				/*设置搜索表单的宽度*/
				padding: 8px;
				overflow: hidden;
				/*清