关于box-shadow属性的一点心得
一般我用到box-shadow都是用于诸如按钮,文本块,某些图标,css类似为:
box-shadow: 1px 1px 5px rgba(0, 0, 0, .8);
这样,样式看上去会更加柔和,或者增加了立体感。
我个人的理解上,box-shadow的本质就是本体的形状的复制。
因此,当我们要给样式增加立体感的时候,就可以做的更加逼真。
HTML: <div class="box shadow"></div> CSS:
.box {
width: 300px;
height: 100px;
background: #ccc;
border-radius: 10px;
margin: 10px;
}
.shadow1::before,
.shadow1::after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(-3deg);
}
.shadow1::after{
right:10px;
left:auto;
transform:rotate(3deg);
}
以上代码效果如下:
一个非常普通的长方形块元素。
利用一个更小的长方形伪类,加上box-sizing复制本体形状的特性,模拟出了纸张的立体感。
同时,box-shadow是可以叠加的,类似box-sizing: 0 0 5px rgba(0, 0, 0, .8), 1px 1px 5px rgba(0, 0, 0, .8),写在前面的属性会在最上面。
所以我们写出以下的效果:
CSS:.shadow {position: absolute;top: 50%;left: 50%;margin-top: -150px;margin-left: -150px;width: 300px;height: 300px;box-shadow: 10px 0 5px rgba(228, 28, 28, 0.8), 0 10px 5px rgba(60, 90, 202, 0.8), -10px 0 5px rgba(81, 247, 86, 0.8), 0 -10px 5px rgba(193, 102, 178, 0.8), 10px 10px 5px rgba(81, 247, 86, 0.8);}
同是,由于我们写的阴影的颜色是带透明度的,因此颜色会中和,我想利用阴影的叠加特性可以做出非常美的效果。
box-shadow既然是一个本体的复制,也就是说我们可以用box-shadow来做出一些图标,用样式写出来的图标我想应该是会比图片加载快,并且是直接和页面一起渲染出来的,就像上面的一个三角图标,就是利用box-shadow写出来的。
HTML:<i class="icon-tri"></i> CSS: .icon-tri {display: inline-block;position: absolute;margin-top: 30px;border-left: 2px solid #ddd;height: 4px;background-color: #ddd;box-shadow: -1px 1px #ddd, 1px 1px #ddd,-2px 2px #ddd, 2px 2px #ddd,-3px 3px #ddd, 3px 3px #ddd,-4px 4px #ddd, 4px 4px #ddd,-5px 5px #ddd, 5px 5px #ddd}
我个人认为,box-shadow应该是可以模拟出左右的图片,图标等。
PS:我看到过有些插件可以做到让你上传一张图片,然后在一个60*60的格子上复现这个图片上60*60px的一块,我想每个px就可以是一个box-shadow,图片的像素可以用canvas的getImageData读取出来,遍历像素的颜色信息,应该这样就可以实现,
下2周准备琢磨琢磨这个。
转载于:https://www.cnblogs.com/youyouluo/p/5791507.html
关于box-shadow属性的一点心得相关推荐
- html中投影效果图,利用CSS3(box shadow)制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
- Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例 向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
- Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
- CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
- CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
- 新手网站推广邮件群发一点心得
关于邮件群发一点心得 请勿见笑,本人新人啊.新人做法还是比较菜的.说一下邮件群发吧.最近本人下软件不下百次.病毒木马电脑已经是满满一箩筐了,幸好是虚拟机里. 首先收集相关邮件地址这里转一篇文章 营销如 ...
- 谈谈选用技术的原则,技术学习方法技巧,阅读代码的技巧及其它 MSF的一点心得...
谈谈技术原则,技术学习方法,代码阅读及其它(正文) 这篇文章是前一阵在水木BBS上和别人讨论中偶自己发言的摘编,是偶这几年开发过程完全经验式的总结.完全个人经验,供批判. 一.选用技术的原则 比较规范 ...
- mysql数据库管理系统模式_MYSQL命令行模式管理MySql的一点心得
MYSQL命令行模式管理MySql的一点心得 MYSQL命令行模式管理MySql的一点心得 MySql数据库是中小型网站后台数据库的首选,因为它对非商业应用是免费的.网站开发者可以搭建一个" ...
- 将asp.net1.1的应用程序升级到asp.net2.0的一点心得
将asp.net1.1的应用程序升级到asp.net2.0的一点心得 费了好一袋烟工夫把CommunityServer升级到了Asp.Net2.0平台,一点心得: vs2005可以很方便的帮我们把vs ...
最新文章
- Xamarin.Android使用教程之Android开发所需的模拟器
- bitmapshader 的使用
- 河北计算机应用技术,[河北科技大学]计算机应用技术
- 二叉树初始化_Java实现二叉树
- echarts生成json地图最简单代码
- 【java并发编程艺术学习】(一)初衷、感想与笔记目录
- 创建一个 Git 版本库
- LAB Color Space
- wxpython 基本的控件 (按钮)
- mybatis insert返回主键_MyBatis官方文档XML 映射文件
- jQuery对象和DOM对象相互转化
- C语言深入浅出可变参数函数的使用技巧(转)
- 新中大计算机知识,新中大财务软件操作步骤
- java后台调用webservice接口常用方式
- Windows下载安装cuda10.1详细步骤
- 高等数学 第一章 极限和连续函数
- python计算个税
- Edge上的gmail网页改为纯文字模式后改不回标准模式(HTML Gmail)问题和解决方法
- 这是你不曾见过的最全的ASO应用市场优化方式(下篇)
- python自动化xmind to testcase详解