CSS3代码实例:用CSS修饰input内阴影

文章简介:CSS修饰input内阴影

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页教学网-CSS修饰input内阴影</title>
<style>
.search{width:200px;height:24px;padding:0;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}
</style>
</head>
<body>
<input type="text" class="search">
</body>
</html>

时间: 2024-10-26 12:42:53

CSS3代码实例:用CSS修饰input内阴影的相关文章

CSS3代码实例:CSS3制作清新网页导航

文章简介:CSS3制作小清新导航. HTML结构 <ul class="nav">  <li id="button1"><a href="#button1">Home</a></li>  <li id="button2"><a href="#button2">About</a></li>  <l

CSS3代码实例:CSS3制作网页登陆表单

文章简介:这个表单效果是很普通,但其制作采用的方法却很有创新,其中用到老技术的是@font-face制作icon.box-shadow制作阴影等,最亮点是使用了calc()函数来计算定位的值. 这个表单效果是很普通,但其制作采用的方法却很有创新,其中用到老技术的是@font-face制作icon.box-shadow制作阴影等,最亮点是使用了calc()函数来计算定位的值.这可是一种新玩法,虽然前面有介绍过这个属性的使用方法,后期的制作中却很少使用他,这个案例让我再次领略了calc()函数的功能

CSS代码实例:用CSS代码写出的各种形状图形

文章简介:纯用CSS定义写出来的图形写法. 一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码.整合了一下,有错误欢迎指出. 1.正方形 #square { width: 100px; height: 100px; background: red;} 2.长方形   #rectangle { width: 200px; height: 100px; background: red;} 3.左上三角   #triangle-topleft { width: 0; height: 0;

《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面

1.4 使用CSS修饰HTML 5页面 实例说明 我们知道,CSS能够修饰传统的HTML页面.其实全新的HTML 5也可以用CSS进行修饰,这样将展现给我们一个更加绚丽的页面效果.本实例的目的是编写一段基本的HTML 5程序,然后使用CSS进行修饰. 其实在支持HTML 5新元素的浏览器中,使用CSS修饰各个新增标记元素的方法十分简单,可以对任意一个元素应用CSS(包括直接设置或引入CSS文件).在默认情况下,CSS假设元素的"display"属性是"inline"

CSS3+HTML5实例:HTML5和CSS3制作登录表单

文章简介:HTML5提供了一些新的元素可以让我们不用JS轻松实现实用的web表单,CSS3提供了很多新的特性,这些特性允许实现新的设计效果(比如动画.渐变等).  HTML5提供了一些新的元素可以让我们不用JS轻松实现实用的web表单,CSS3提供了很多新的特性,这些特性允许实现新的设计效果(比如动画.渐变等). 这里做了一个基于HTML5和CSS3的登录表单.实例代码使用到HTML5提供的一些表单新特性,所以你需要使用支持HTML5和CSS3的浏览器来查看. HTML5代码: <form id

JQuery选中checkbox方法代码实例

  这篇文章主要介绍了JQuery选中checkbox方法代码实例(全选.反选.全不选),本文直接给出代码实例,需要的朋友可以参考下 1.checkbox list选择 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

CSS3Ps -Photoshop图层特效转CSS3代码

推荐给大家一款免费PS扩展插件CSS3Ps,灰常好用,可以将Photoshop图层特效等效果直接转为CSS3代码,无需为了再浏览网页查询css3代码的写法,无需手动查看ps图层特殊的数据来编写css3代码,大大提升编写代码的效率,走过路过的同学不过错过哈!Come on,直接进去正题吧!!! 下图为Photoshop CS5图层的混合选项菜单.   有了CSS3Ps,上面的特效可以直接导出CSS3代码~ 以webkit浏览器为主的css3代码示例: 圆角边框:-webkit-border-rad

html5+CSS3创建兼容浏览器的range input 对象

随着IE10的发布,我们给range input创建样式的能力已经得到了引人注目提高.用纯CSS实现跨浏览器兼容的range input(sliders)已经成为可能.在这篇教程中,我们用基本的range input作为例子:     然后把它变成:     为了简化生成跨浏览器兼容的样式的过程,我们引进LESS.当然也有CSS版本. 添加基础CSS样式 我们需要给range input添加几个样式来覆盖所有浏览器的默认外观. input[type=range] {   -webkit-appe

CSS3实战开发: 纯CSS实现图片过滤分类显示特效

原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运行效果: 从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗. 很多人可能会说,这个这么简单,直接使用javascript或jQuery等前端框架,再配合一些CSS,就可以很快实现同样的效果了.如果你是这一部分人,我也希望你停下脚步,看看这篇教