css3 box-shadow阴影(外阴影与外发光)讲解
来源:互联网 发布:银河系漫游指南知乎 编辑:程序博客网 时间:2024/04/29 05:53
基础说明:
外阴影: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 其它属性与外阴影相同
- css3 box-shadow阴影(外阴影与外发光)讲解
- css3 box-shadow阴影(外阴影与外发光)讲解
- HTML5与CSS3之box-shadow--阴影外阴影与外发光
- HTML5与CSS3之box-shadow--阴影外阴影与外发光
- css3 box-shadow 内阴影与外阴影
- 【CSS3】---阴影 box-shadow
- css3阴影box-shadow
- css3阴影box-shadow
- css3 box-shadow发光效果
- css3阴影属性box-shadow
- CSS3 box-shadow(阴影使用)
- CSS3 box-shadow(阴影使用)
- CSS3 box-shadow(阴影使用)
- CSS3盒阴影box-shadow
- css3 边框阴影 box-shadow
- css3 box-shadow投影发光效果
- css3 box-shadow投影发光效果
- CSS3之元素阴影box-shadow
- DIY个人智能家庭网关——python篇之推送消息到手机
- Reveal安装及使用
- 最长回文(manacher算法,最大回文子串)
- Coin Change
- Maven 学习(一)搭建maven环境
- css3 box-shadow阴影(外阴影与外发光)讲解
- C++ 函数参数笔记
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(82)-Easyui Datagrid批量操作(编辑,删除,添加)
- 【Codeforces Round #402 (Div. 1)】Codeforces 778B Bitwise Formula
- spring mvc 入门
- MySQL 中LIMIT的使用详解
- 在ccs7下编译Linux内核
- 改后缀名不能导致图片格式的转换,以.png后缀名的图片不一定是png图片
- 人工智能之自谈(1)