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

此处{ } <>全部用()代替

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)
(p class="six")彩色阴影:(/p)

示例效果:

时间: 2024-08-09 06:33:51

CSS3 输入框阴影效果及其他阴影效果的相关文章

第 21 章 CSS3 文本效果

学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 CSS3 提供了 text-shadow 文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器支持情况. text-shadow Opera Firefox Chrome IE Safari 9.5+ 3.5+ 4+ 10+ 3.1+ 这里有几个注意点:1.text-shadow 在 CSS2 的时

27.CSS3文本效果

第二十一章 CSS3文本效果 **************************************************** *查询适应的最低版本,可以去:"http://caniuse.com"* **************************************************** 一.文本阴影(CSS3提供了text-shadow文本阴影效果) 浏览器支持情况如下 Opera     Firefox     Chrome    IE    Safari

css3 text-shadow的使用

text-shadow text-shadow:none | <shadow> [ , <shadow> ]* <shadow> = <length>{2,3} && <color>? 默认值:none 适用于:所有元素 继承性:有 动画性:是 计算值:1个颜色加3个绝对长度 取值: none: 无阴影 <length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个

css3-(box-shadow)属性

[box-shadow属性]: 是一个css3属性,用于创建阴影效果.语法:box-shadow:offset-x offset-y blur spresd color position;属性值说明:offset-x offset-y指的是元素水平偏移量:blur:表示阴影的模糊半径:spread:阴影尺寸(从元素到阴影的距离),正值会在元素的各个方向按指定的数值延伸阴影,负值会使阴影收缩的比本身元素的 尺寸还小.color:阴影的颜色值:position:可选,表示阴影的位置,默认值是外部阴影

box-shadow和flex布局的应用

昨天拿到设计稿后,发现设计师设计的边框阴影比较特别,我平常没有接触过. 所以一开始我是直接切图和把边框当做背景来使用.等把页面全部做来后,我在网上搜了box-shadow相关方面的文章,发现还是有很多牛人总结了.下面就是我学习后的结果. <div class="fans"> <ul class="fans-ul"> <li> <img class="lazy" src="img/fans_1.j

android图表ichartjs

android之ichartjs图表 1.http://www.ichartjs.com    pdf下载:http://download.csdn.net/detail/menglele1314/8721121 2. 简介 what's the ichartjs? 2.1. ichartjs 是一款基于HTML5的图形库.使用纯javascript语言, 利用HTML5的canvas标签绘制各 式图形. ichartjs致力于为WEB应用提供简单.直观.可交互的体验级图表组件.是WEB图表展示

优秀的前端工具

2014年08月09日更新 CLIP PATH (MASK) GENERATOR CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. 2014年01月20日更新 CSS Animatie CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码. 2013年09月03日更新 CREATE CSS3 CREATE CSS3是一款在线集成众多CSS3功能的生成

第二天课堂笔记

##5.0新特性###十大新特性1. 全新Material Design设计风格 * 新的视觉语言,在基本元素的处理上,借鉴了传统的印刷设计,字体版式.网格系统.空间.比例.配色.图像使用等这些基础的平面设计规范2. 支持多种设备3. 全新的通知中心设计4. 支持64位ART虚拟机 * 谷歌承诺所有性能都会比原来提升一倍,Android Lollipop支持更大的寄存器,支持新的指令集,提升了内存寻址空间,未来Android智能手机将支持4GB以上的内存.5. Project Volta电池续航

hr去掉阴影部分,跨浏览器全兼容

看到网上好多人都是copy别人的答案,就连叙述都一个样的,网上叙述如下: html中水平衡线hr默认高度是两个像素,其中border-top高1px,且颜色为黑,border-bottom高1px颜色为灰,这时看着是阴影效果,去掉阴影效果很简单,只需在css里把border-bottom或border-top属性设置一个为none即可. 仅此而已,但是仅仅设置border-top或者border-bottom中的一项还不足以全兼容,正确的方法是(以点线为例): <hr style="bor