基础语法

外阴影：box-shadow:X Y Npx #color;

内阴影：box-shadow:inset X Y Npx #color;

第一个属性：阴影的X轴(可以使用负值)

第二个属性：阴影的Y轴(可以使用负值)

第三个属性：阴影的像素（大小）

第四个属性：阴影的颜色

内阴影：inset 这个可以设置内部阴影 具体看示例4

注：此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6,span,a等)不是用来设置文字阴影 如果设置文字阴影请参考:text-shadow

示例1

使用样式：box-shadow:0px 0px 8px #f00;因没有使其它X轴与Y轴移动 所在会在本身发生作用 后面的属性我想做前端的应该很明白了

示例2

使用样式：box-shadow:3px 3px 8px #f00;这时候与上面的不同 X轴与Y轴改变了 所以变成了这样‍

示例3

使用样式：box-shadow:-2px 0px 8px #f00,0px -2px 8px #000,0px 2px 8px #9e038a,2px 0px 8px #0f0;也许你看到这样的代码会感觉很乱 但是看到效果图片之后我想你就能立刻懂得这是怎么做的了无非改一下X轴与Y轴与颜色值 还有阴影大小

示例4——内阴影

‍样式使用：box-shadow: inset 0px 0px 30px red;与上面的相同 唯一不同的是添加了一个inset 其它属性与外阴影相同

CSS3之box-shadow--阴影外阴影与外发光的更多相关文章

  1. css3 box-shadow阴影(外阴影与外发光)

    基础说明:     外阴影:box-shadow: X轴  Y轴  Rpx  color;     属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影 ...

  2. css3 box-shadow阴影(外阴影与外发光)讲解

    基础说明:     外阴影:box-shadow: X轴  Y轴  Rpx  color;     属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影 ...

  3. ｃｓｓ3 box-shadow阴影(外阴影与外发光)讲解

    基础说明:     外阴影:box-shadow: X轴  Y轴  Rpx  color;     属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影 ...

  4. CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）

    /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius ...

  5. 常见input输入框 点击 发光白色外阴影 focus

    先看看具体实现的效果 第一就是点击input 实现的效果 默认谷歌点击input是蓝色边框 去掉用outline:0;  实现效果用focus  默认状态的边框颜色一般较重 如border:1px s ...

  6. box-shadow内阴影、外阴影

    外阴影: box-shadow:X轴  Y轴  Rpx  color; 属性说明(顺序依次对应):阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色 内阴影: bo ...

  7. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  8. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  9. Box-shadow制作漂亮的外阴影输入框

    背景:之前做项目中的一个移动端页面,关于在搜索框中输入信息查找对应的照片 改了几次ui图之后,最终的搜索框的设计图如下: 开始做页面的时候,就想到了用box-shadow 来实现外阴影边框.用bord ...

随机推荐

  1. mysql 查询一个月的数据

    //今天 select * from 表名 where to_days(时间字段名) = to_days(now()); //昨天 SELECT * FROM 表名 WHERE TO_DAYS( NO ...

  2. 关于synchronized和ReentrantLock之多线程同步详解

    一.线程同步问题的产生及解决方案 问题的产生: Java允许多线程并发控制,当多个线程同时操作一个可共享的资源变量时(如数据的增删改查),将会导致数据不准确,相互之间产生冲突. 如下例:假设有一个卖票 ...

  3. 20175215 2018-2019-2 第四周Java课程学习总结

    第五章学习内容 1.子类的继承性 (1)子类和父类在同一包中的继承性 如果子类和父类在同一个包中,那么,子类自然地继承了其父类中不是private的成员变量作为自己的成员变量,并且也自然地继承了父类中 ...

  4. LeetCode 93. 复原IP地址（Restore IP Addresses）

    题目描述 给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255.11.135&qu ...

  5. watir学习系列--对话框处理(转)

    1.下面是网上编写的类库,保存为libAutoit.rb #LibAutoit主要处理windows弹出的对话框,调用autoit类进行处理 #函数如下: #- ChooseFileDialog函数: ...

  6. 下载的管理类MyDownloadManager

    import android.content.Intent; import android.net.Uri; import java.io.File; import java.io.FileOutpu ...

  7. 编辑器UEditor入门学习

    优点:非常使用的富文本编辑器,对比于之前使用的summernote,比前者多出了更多的字体图标 废话少说,直接步骤: 1.导入资源(全部放在单独的文件下即可,下图为“UEditor”文件夹) 2.引用 ...

  8. mysql--创建表，插入数据，修改表名，删除表，简单查询/内连接、左/右连接

    创建表mm:  其中id为主键且自增长 ) primary key not null unique auto_increment, name ) not null, age ), class ) no ...

  9. Python 的 Collection 库

    Collections 是 Python 内建的一个集合模块,提供了许多额外的数据类型. namedtuple namedtuple 主要用来生成可以使用名称来访问元素的数据对象,通常用来增强代码的可 ...

  10. Elasticsearch 安装 Head 插件

    引子:在上一篇文章Elasticsearch入门(一):CentOS 7.6 安装ES 7.0.0中,我们讲了如何在CentOS 7.6环境下安装 Elasticsearch 7.0.下面,我将讲一讲 ...