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

最新推荐文章于 2023-03-29 16:13:22 发布

VIP文章 crper

最新推荐文章于 2023-03-29 16:13:22 发布

阅读量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>>发现里面这个按钮的实例挺赞的,稍微完善了一下原来例子.
去掉一些现在不用的前缀,补全了最终版的.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;
				/*清

最低0.47元/天解锁文章

crper

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
笔记-CSS3实现3D搜索输入框

题外话今天拜读了大漠的<<图解CSS3>>发现里面这个按钮的实例挺赞的,稍微完善了一下原来例子. 去掉一些现在不用的前缀,补全了最终版的.clearfix,还有样式稍作修改~~原版效果图: 预备知识基础布局知识CSS2.1 && CSS3 制作原理(CSS3特性)box-shadow – 盒子阴影 -> 使用多层阴影达到立体效果box-image:linear-gradient ->
复制链接

扫一扫