box-shadow中的理解(bootstrap)
2024-08-27 10:54:58
刚研究了bootstrap中css里面的源码,找到了表单(form)中关于输入框的一些设置,根据要求,label标签和input标签需要一起使用,(屏幕阅读器中不能单独辨认input),如需隐藏label标签,在label中设置.sr-only这个class即可.看了下.form-control这个属性(应用在input标签上),下面是这个css样式.
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
我们发现它做了transition的效果,box-shadow的ease-in-out .15s的过渡时间,inset表示内阴影,类似ps中blur shadow的效果.改变这个时间可以产生点击input框,那种浅蓝色的效果出现的时间就会相应改变.不过bootstrap这些事件设置的很好,不需要做什么修改,只是给以后做这种类似的效果一个思路罢了.
http://blog.csdn.net/freshlover/article/details/7610269这里有详细的介绍各个参数的.就不多说了.
主要是从中要思考到,动画效果的加入,不单单是一个阴影的使用.
最新文章
- jenkins配置源码管理git
- iframe使用方法
- hdu 2160 母猪的故事
- Android 学习笔记之WebService实现远程调用+内部原理分析...
- Python 异常相关参考
- mysql实例 保存查询结果到变量
- Handler 原理分析和使用(二)
- 多线程并发编程之显示锁ReentrantLock和读写锁
- jenkins 集成 redmine 账户验证的方案
- poj3233(矩阵快速幂)
- discuz开发学习
- Partitions - Partition Storage Modes and Processing-MOLAP、ROLAP、HOLAP
- mysql 外键约束及表关联
- Spring框架中的定时器 使用和配置
- querySelectorAll选择器的js实现
- 服务器中同一个【ip:port】可以多次accept的问题
- 图像处理项目——生成csv文件提高读取效率
- gzip0
- 什么是RESTfull?理解RESTfull架构【转】
- 26QTimer定时器的使用