外阴影:box-shadow: X轴  Y轴  Rpx  color;

属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值(大小)    阴影的颜色

内阴影:box-shadow: X轴  Y轴  Rpx  color  inset;

  默认是外阴影   内阴影:inset 可以设置成内部阴影

测试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 其它属性与外阴影相同

原文链接:https://www.cnblogs.com/telwanggs/p/7736454.html

CSS--外发光与内阴影的更多相关文章

  1. Ps中的难点问题分析

    一.布尔运算的运用 1.布尔运算是在图形工具组中使用,快捷键“U” 2.使用方法:都是在同一图层下运算,在进行布尔运算之前,首先用路径选择工具,小黑箭头,快捷键是“A” 选取你要运算的图形. 3.布尔 ...

  2. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. CSS用足够大的纯色内阴影去覆盖掉谷歌input记住账号或密码时默认出现的黄色背景

    在谷歌浏览器会默认记住账号,而记住账号之后其input的背景会变成黄色,解决的办法如下: input:-webkit-autofill { -webkit-box-shadow: 0px 1000px ...

  4. CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆

    1.渐变字体 主要是看:-webkit-background-clip: text; 该属性 <style> .b1{ width: 500px; height: 200px; font- ...

  5. box-shadow 同时有内阴影和外发光效果

    box-shadow: 0px 0px 10px rgba(0,0,0,0.8) inset,0px 0px 5px rgba(200,200,200,0.5);

  6. css中常见的属性-----在路上(14)

    一.css文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...

  7. CSS中的常用属性

    一 CSS文字属性:color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/fon ...

  8. 【html】【5】html class属性css样式

    必看参考: http://www.divcss5.com/css3-style/ http://www.jb51.net/css/142448.html http://www.w3school.com ...

  9. 偏门却又实用的 CSS 样式

    ::-Webkit-Input-Placeholder input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placehold ...

  10. CSS样式有哪些常用的属性?

    一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border CSS样式有哪些常 ...

随机推荐

  1. [转载]谈谈document.ready和window.onload的区别

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...

  2. 搭建ELK日志分析(亲测无毒!)截图没有附上。。凑合看。搭建出来没有问题

    ( 1 )安装 Logstash 依赖包 JDK Logstash 的运行依赖于 Java 运行环境, Logstash 1.5 以上版本不低于 java 7 推荐使用最新版本的 Java .由于我们 ...

  3. 纯js实现移动端滑动控件,以上下滑动自取中间位置年龄为例;

    <!-- 需求:上下滑动,在一个大的div块里显示5个小的值,滑动过程中自动获取中间位置的值 需要注意的是: 1 touchmove会多次被触发: 2 获取中间位置的值可以通过定位得top值来获 ...

  4. 为什么要使用yocto

    作为灵活多变且经济高效的解决方案,嵌入式 Linux展现了巨大的价值,并广泛应用于消费电子设备.网络设备.零售点和行业应用程序.然而,广泛的应用也意味着多样化的业务需求,嵌入式解决方案开发人员必须构建 ...

  5. RTSP 与 RTMP 协议 (转)

    源: RTMP协议与RTSP协议比较 RTSP 与 RTMP 协议 RTSP Spec中文版(1-11) RTSP协议 流媒体之rtsp篇 H264视频传输.编解码----RTSP协议

  6. 在nginx的http模块下面,一个server就可以看做一个站点,配置形式大概是这样的:

    http { index index.php index.htm index.html; server { server_name www.site1.com; location / { # [... ...

  7. linux交换区使用过多导致的性能问题

    近日,我们开发发现有一台配置相同的服务器跑的特别慢,相同数据量的情况下,其他服务器只要跑10分钟,这台服务器要跑50分钟,经确认,所有的应用层配置参数都相同.上去之后,发现该服务器swap使用比较多, ...

  8. 比beanutil更加灵活的dto转换工具dozer

    准确的说,是因为pojo无法一招走天下或者说内外部隔离的原因,所以有些时候,不得不在两个bean之间做copy或者转换映射.对于直接性的属性拷贝beanutil以及能够满足大部分要求,但是如果遇到字段 ...

  9. Spring 学习——Aware接口

    Aware 作用 Spring中提供了一些以Aware结尾的接口,实现了Aware接口的Bean在初始化后,可以通过一些接口获取相应的资源. 通过Aware接口,可以对Spring的资源进行一些操作( ...

  10. minicom支持向串口自动发送命令的功能

    1. 用法 minicom -S <script name> -C <log name> 参数解析: -S: 指定要执行的脚本 -C: 指定输出日志文件名 2. 既然可以指定脚 ...