css3阴影box-shadow使用个人笔记
来源:互联网 发布:三大中文期刊数据库 编辑:程序博客网 时间:2024/06/04 00:27
在过去的工作中经常会在设计图中遇到阴影效果的样式,但是每次使用box-shadow实现阴影效果的时候总是因为遗忘它一些值的用途而上网搜索。所以我打算把我多box-shadow的理解和我经常使用的场景记录下来。一是方便自己以后查阅,二是为了将其分享个大家,同时也希望大家能多多指正。
box-shadow兼容性:
基本语法:
box-shadow: inset h-shadow v-shadow blur spread color;inset:可选。将外部阴影 (outset) 改为内部阴影。h-shadow: 必需。水平阴影的位置。允许负值。v-shadow:必需。垂直阴影的位置。允许负值。blur:可选。模糊距离。spreed:可选。阴影的尺寸。color:可选。阴影的颜色。
为了更形象的理解这些值的特征,我一个Demo来加深理解:
Demo代码如下
css阴影边框Demo .box{ display: block; width: 100px; height: 100px; float: left; margin: 20px; background-color: #EEEEEE; } .shadow1{ -webkit-box-shadow: inset 0 0 10px #333333; -moz-box-shadow: inset 0 0 10px #333333; box-shadow: inset 0 0 10px #333333; } .shadow2{ -webkit-box-shadow: 0 0 10px #333333; -moz-box-shadow: 0 0 10px #333333; box-shadow: 0 0 10px #333333; } .shadow3{ -webkit-box-shadow: 10px 0 10px #333333; -moz-box-shadow: 10px 0 10px #333333; box-shadow: 10px 0 10px #333333; } .shadow4{ -webkit-box-shadow: 0 10px 10px #333333; -moz-box-shadow: 0 10px 10px #333333; box-shadow: 0 10px 10px #333333; } .shadow5{ -webkit-box-shadow: 10px 10px 10px #333333; -moz-box-shadow: 10px 10px 10px #333333; box-shadow: 10px 10px 10px #333333; } .shadow6{ box-shadow: 0 0 10px 10px #333333; -webkit-box-shadow: 0 0 10px 10px #333333; -moz-box-shadow: 0 0 10px 10px #333333; } .input{ border: 1px solid #FFFFFF; border-radius: 8px; outline: auto; height: 30px; line-height: 30px; } .input:focus{ -webkit-box-shadow: 0 0 10px #333333; -moz-box-shadow: 0 0 10px #333333; box-shadow: 0 0 10px #333333; } .hover{ -webkit-transition: all .3s ease; transition: all .3s ease } .hover:hover{ transform: translateY(-6px); -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); box-shadow: 0 15px 30px -15px #333333; -webkit-box-shadow: 0 15px 30px -15px #333333; -moz-box-shadow: 0 15px 30px -15px #333333; }box-shadow每个参数的演示
box-shadow常见应用场景
input获取焦点时
鼠标移动到模块上的场景
Demo效果如下:
阅读全文
1 0
- css3阴影box-shadow使用个人笔记
- CSS3 box-shadow(阴影使用)
- CSS3 box-shadow(阴影使用)
- CSS3 box-shadow(阴影使用)
- 【CSS3】---阴影 box-shadow
- css3阴影box-shadow
- css3阴影box-shadow
- CSS3 box-shadow 阴影的使用
- CSS3阴影 box-shadow的使用详解
- CSS3阴影 box-shadow的使用总结
- css3阴影属性box-shadow
- CSS3盒阴影box-shadow
- css3 边框阴影 box-shadow
- CSS3阴影 box-shadow的使用和技巧总结
- CSS3阴影 box-shadow的使用和技巧总结
- CSS3阴影 box-shadow的使用和技巧总结
- CSS3阴影 box-shadow的使用和技巧总结
- CSS3阴影 box-shadow的使用和技巧总结
- 计时器脚本
- 单独启动和关闭hadoop服务
- CMake使用整理
- 怎样从0开始搭建一个测试框架_4——报告
- set集合分类总结(hashSet、treeSet、linkedHashSet)
- css3阴影box-shadow使用个人笔记
- easyui-propertygrid单元格失去焦点获取值
- 一个简单的排序算法
- Servlet介绍
- [USACO3.1]联系 Contact
- Codeforces 835D
- java连接oracle数据库用本机IP地址不可以,而用localhost可以
- python GUI
- Laravel虚拟环境:Mac安装Valet