div四个边框分别设置阴影样式
对于div边框的阴影一直没有很好地理解,也一直不明白怎么给四个边框分别设置阴影。昨天项目中碰到了这个问题,就认真想了一下,在此总结一二。
首先,还是从官方解释说起。
网上的解释通常都是什么水平阴影长度、垂直阴影长度,略抽象。根据我的实验和理解,从坐标层面来理解比较直观,那么我们首先建立如下直角坐标系:(突然发现我的电脑上竟然没有装Visio,现学现卖用PS临时画了一个,原谅我)
OK。原点为基点,原点左侧为x轴负方向,值为负,右侧为正;原点下方为y轴正方向,值为正,上方为负。如上图箭头所指。好理解吗?不要嫌我啰嗦,正确理解坐标方向对于理解阴影画法至关重要。
好了,上代码。官方用语: box-shadow:1px 2px 3px 4px #ccc inset;
来分别看一下以上六个值的含义: 1px 从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度);
2px 从原点开始,沿y轴正方向的长度;(倘若为负值,为沿y轴负方向的长度);
3px 阴影的模糊度,只允许为正值;
4px 阴影扩展半径;
#ccc 阴影颜色;
inset 设置为内阴影(如果不写这个值,默认为外阴影);
我们再详细点说,所谓内外阴影,其实就是指的是阴影在div的外面一圈还是在div的里面一圈,如下图:
外阴影 内阴影
铺垫完毕,说正事——给四条边分别加阴影。
如果打算添加外部阴影,那么在div内部是不会显示阴影的。看起来好像是废话,来仔细分析一下。
将div放在直角坐标系中,则div上边与x轴重合,左边与y轴重合,没错吧。所以,对于上面一条边,沿y轴正方向的阴影不会显示,因为沿y轴正方向的长度已经进入到了div内部。同样的,对于左侧边框,沿x轴正方向的长度也进入到了div内部,阴影不会显示。
对于右侧边框,则沿x轴负方向的长度不显示(不要纠结于原点位置,只考虑坐标方向。可以看做右边与y轴重合,方便理解);对于下方边框(看做下边与x轴重合),沿y轴负方向的长度进入div内部,不显示。
好吧,我的语言组织能力有待加强。将以下代码配上这一段的文字描述,就不难理解了。
/*说明:(以上部边为例进行说明)
1. 对于上边,沿x轴方向的偏移量显然没有意义,设为0px;
2. 沿y轴正方向阴影进入div内部,不显示,因此写为负数;
3. 扩展半径不要写,或者写成0px,这样就不会影响其他的边;
4. 颜色自定;
5. 模糊程度按需要自定;
6. 下、左、右边阴影按规律类推。
*/
box-shadow: 0px -10px 0px 0px #ff0000, /*上边阴影 红色*/
-10px 0px 0px 0px #3bee17, /*左边阴影 绿色*/
10px 0px 0px 0px #2279ee, /*右边阴影 蓝色*/
0px 10px 0px 0px #eede15; /*下边阴影 黄色*/
效果图:
外阴影加好了。倘若是内阴影,可以按这个规律自己推一下。
试验中发现了一个问题:
对于上下边,相当干净漂亮。但是写左边的阴影时,上边会有一条细细的阴影;写右边阴影时,下边会有一条细细的阴影。不懂为什么。
期待大神解答。或者先放着吧,等我成为大神了再来解答。
div四个边框分别设置阴影样式的更多相关文章
- 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...
- box-shadow四个边框设置阴影样式
其实对于box-shadow,老白我也是一知半解,之前用的时候直接复制已有的,也没有仔细思考过box-shadow的数值分别对应什么,最后导致阴影的边如何自由控制,苦于懒人一个一直没有正式去学习,今天 ...
- javafx分别设置四个边框
package border; import javafx.application.Application; import javafx.geometry.Insets; import javafx. ...
- 如何给div加一个边框border样式
如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...
- QT QProgressBar QProgressDialog 模态,位置设置,无边框,进度条样式
一 关于模态设置 QProgressDialog可以设置模态(需要在new的时候传入parent),QProgressBar设置不好: 只有dialog可以设置模态,widget不能设置模态(QPr ...
- react学习(四)之设置 css样式 篇
react中设置css样式 方法一: 行内样式:使用{{ }},与正常jsx中插入js代码不一样,这里需要两个括号. <div style={ { float: 'right',} }> ...
- div背景透明内容不透明与0.5PX边框兼容设置
1.问题:设置 border-width:0.5px; 并兼容安卓和苹果移动端. 兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同 解 ...
- 从零开始学 Web 之 CSS3(四)边框图片,过渡
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- POI 设置Excel样式(转)
POI 设置Excel样式 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结: 先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSh ...
随机推荐
- VMware-workstation-full-11.0.0-2305329&VMware-player-7.0.0-2305329
VMware-workstation-full-11.0.0-2305329.exe Name: VMware-workstation-full-11.0.0-2305329.exe 发行日期: 20 ...
- StoryBoard解惑
可以把StoryBoard看做是一组viewController对应的xib,以及它们之间的转换方式的集合.在StoryBoard中不仅可以看到 每个ViewController的布局样式,也可以明确 ...
- spring boot 跨域访问处理
问题场景:由于项目中使用到跨域访问,今天也得到高人指点,所以写出来分享给大家.可能是考虑到前后端分离,前端后端服务器不在一台机器上,出现这种跨域访问的情况.正常情况下本地访问是没有问题,但是遇到这种非 ...
- 【python】闭包、@修饰符(装饰器)、
闭包:(返回函数的行为叫闭包??) #函数也是对象,所以可以被传递 def line_conf(a,b): def line(x): return a*x+b return line line1=li ...
- 搭建测试环境——针对S3C6410开发板
(一)前言 目前市面上的开发板型号和种类很多,但目前最流行的是基于三星S3C6410 ARM11架构的开发板.国内很多厂商在S3C6410 ARM11架构的开发板的基础上进行了扩展,开发了扩展板,本博 ...
- KinerCode.js
1 /*验证码*/ function KinerCode(options) { this.opt = this.extend(true, this.options, options); this.op ...
- oc string
转自http://www.cnblogs.com/CCSSPP/archive/2011/10/20/2218897.html 备用查看 NSLog(@"字符串处理"); //获得 ...
- Appium 截屏截图操作
问题场景:有时当我们的脚本运行报错时,需要通过截屏来分析异常的来源.而selenium也提供了可以截图的方法TakesScreenshot.getScreenshotAs 举例:我们把截屏的图片存储在 ...
- struts2 配置拦截器
第一步:继承MethodFilterInterceptor写自己的自定义拦截器 import org.apache.struts2.ServletActionContext; import com.o ...
- 常用的7个.htaccess代码组织某个国家的IP访问
htAccess 文件(Hypertext Access file)是Apache Web服务器的一个非常强大的配置文件,对于这个文件,Apache有一堆参数可以让你配置出几乎随心所欲的功能. 使用. ...