border-shadow
基础说明:
外阴影:box-shadow: X轴 Y轴 Rpx color;
属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色
内阴影:box-shadow: X轴 Y轴 Rpx color inset;
默认是外阴影 内阴影:inset 可以设置成内部阴影
注(PS):此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影 如果设置文字阴影请参考知识点:text-shadow(同理)
因为是新属性,为了兼容各主流浏览器并支持这些主浏览器的较低版本,基于主流浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式
欧朋浏览器 -o-box-shadow IE>9 -ms-box-shadow
基础练习:
为了更好的了解box-shadow的特征,做几个小测试:(为了方便直接在标签内嵌套样式)
测试1: <div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div> box-shadow: 0 0 10px #f00 (因没有使其X轴与Y轴移动 设置值 所在会在本身发生作用 半径范围,颜色)
测试2: <div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div> box-shadow:4px 4px 10px #f00;与测试1不同 X轴与Y轴改变了正值(正值 向右 向下) 所以变成了这样
测试3:<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div> box-shadow:-4px -4px 10px #f00;与测试2不同 之处是 X轴与Y轴改变成了负值(负值 向左 向上) 所以变成了这样
同理:你可以测试下一正值,一负值的效果,这里就不做测试了。。。。。。。。
测试4:<div style="box-shadow:-10px 0px 10px red, /*左边阴影*/
0px -10px 10px #000, /*上边阴影*/
10px 0px 10px green, /*右边阴影*/
0px 10px 10px blue;" /*下边阴影*/ ></div>
你看到这样的代码会感觉很乱 但是看到效果图片之后你就能明白这是怎么做的了无非改一下X轴与Y轴位置与颜色值 还有阴影值大小,(用逗号隔开)多练习几次就好
测试5:--内阴影 <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset; 与上面写法相同 唯一不同的是添加了一个inset 其它属性与外阴影相同
border-shadow相关推荐
- ubuntu 18.04设置系统自带系统截图快捷键
0.前言 ubuntu 18.04自带一个截图工具gnome-screenshot,有三种模式,全屏截图.当前活动窗口截图.选取活动区域截图 1.设置快捷键 Setting->Devices-& ...
- Ubuntu软件的安装和使用
windows 系统有很多的截图的软件 比如 QQ 浏览器什么的,但是ubuntu 还是很少的截图软件的接下来介绍一下ubuntu 的截图软件 1.键盘上的alt+printscreen 可以全屏幕的 ...
- html5实现进度条功能效果非常和谐
1. [图片] html5.jpg 2. [代码][HTML]代码 <script type="text/javascript"> var i = 0; ...
- 拯救深度学习:标注数据不足下的深度学习方法
摘要:解决深度学习对数据的依赖问题和减少数据标注成本成为了业界的研究热点.本文将介绍以下几个研究方向:半监督/弱监督学习.数据合成.主动学习.自监督. 1. 引言 得益于深度学习的发展,许多计算机视觉 ...
- Vue——May(1)
VUE 一.vue基础 1.1 引用 1.2 基础应用 1.3 模板语法 1.4 数据处理 1.5 el与 .$mount 1.6 data的函数式写法 1.7 架构模型--MVVM模型 1.8 数据 ...
- 前后台处理得到 前台图片 draw.io/ mxgraph
前后台处理得到 前台图片 draw.io/ mxgraph 1.action.js this.addAction('export...', function() {//ui.showDialog(ne ...
- 你是这样的 CSS,19个唯美的边框
作者:niemvuilaptrin 译者:前端小智 来源:medium 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.co ...
- Bootstrap实战---电池充电特效编写(d-flex+JS)
Bootstrap实战-电池充电特效编写(d-flex+JS) <!DOCTYPE html> <html> <head><meta charset=&quo ...
- Bootstrap实战---电池充电特效编写2(仅d-flex布局)
Bootstrap实战-电池充电特效编写2(仅d-flex布局) <!DOCTYPE html> <html> <head><meta charset=&qu ...
- python linux上屏幕截图_在Linux上通过Python脚本拍摄屏幕截图
我想通过python脚本截取屏幕截图,并毫不干扰地保存它. 我只对Linux解决方案感兴趣,应该支持任何基于X的环境. 任何原因您不能使用scrot? 很想检查以下建议方法的性能. 新链接:manpa ...
最新文章
- 自然语言处理(NLP)之TF-IDF原理及使用
- 研究院正式启动“智源学者计划”,公布候选人名单,并发布首个联合实验室...
- 10.python网络编程(解决粘包问题 part 2)
- python3改变路径出现的SyntaxError问题
- 【Java 网络编程】TCP 简介
- 20169207《Linux内核原理与分析》第五周作业
- springboot自动配置的原理_SpringBoot实战:详解SpringBoot自动配置原理
- 函数hook注意事项
- linux下的asp.net服务器,Linux(Ubuntu)下搭建ASP.NET Core环境
- Angr安装与使用之安装篇
- 记录下关于qt使用windeployqt.exe打包程序之后运行报错无法定位程序输入点
- SPSS做因子分析(非常细致的过程)
- python实现屏幕录制_python批量转换屏幕录像专家的exe视频
- CF816B Karen and Coffee题解
- 暑假计算机教育培训总结,暑假计算机培训心得体会
- 你能发现什么?又能坚持什么?
- 计算机 人脑 发热 ppt,人脑即电脑,疯狂的大脑进化史,大脑科学的革命
- 无缝轮播图无缝轮播图
- 实现点击选择按钮时候选中对应选中的行,当点击某一行单元格时候就清除其他选中行然后选中对应点击的那一行
- Word2Vec词向量模型代码
热门文章
- c语言if语句知识点总结,c语言中if语句知识点总结
- 医学英文文献怎么找?
- Transaction使用及原理
- 详解Linux内核红黑树算法的实现 http://blog.csdn.net/npy_lp/article/details/7420689
- 关于Excel2003行数(65535)和列数(255)限制问题解决
- python打开qq并登录_python爬虫入门之qq登陆初探
- Navicat无法导入excel文件的异常处理
- 不踩雷不将就 京东智能产品30天无忧退
- TARA-威胁建模方案2
- 浅谈分形艺术是什么?