html质感阴影_详解CSS3的图层阴影和文字阴影效果使用
box-shadow图层阴影
box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
阴影类型可以省略,默认为外投影,当它的值为inset时,为内阴影效果。
X水平偏移和Y垂直偏移可取正负值,当X为负值是投影在左边,为正时投影在右边。当Y为负值时投影在上面,为正时投影在下面。
阴影大小和扩展与ps里面的原理一样。
浏览器兼容性:不同的浏览器兼容性不同,mozilla内核的浏览器写法如下(但新版本的火狐浏览器已经不需要再添加):
-moz-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
webkit内核的浏览器写法如下:
-webkit-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
实例一:
CSS Code复制内容到剪贴板
.shadow{
width:200px;
height:50px;
box-shadow:3px3px3px3px#000;
/*-moz-box-shadow:3px 3px 3px 3px #000; //以火狐为代表的mozilla内核浏览器,火狐现在的版本已经支持这个属性,所以不用再加-moz*/
-webkit-box-shadow:3px3px3px3px#000;
}
效果图:
把box-shadow投影类型改为inset,效果图:
实例二:
CSS Code复制内容到剪贴板
.shadow{
width:200px;
height:50px;
box-shadow:0 -5px5px0red,5px05px0yellow,05px5px0green,-5px05px0blue;
/*-moz-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue; //以火狐为代表的mozilla内核浏览器,火狐现在的版本已经支持这个属性,所以不用再加-moz*/
-webkit-box-shadow:0 -5px5px0red,5px05px0yellow,05px5px0green,-5px05px0blue;
}
效果图:
text-shadow文字阴影
上面我们讨论了关于css3图层阴影 box-shadow来实现图层阴影的效果,今天我们来共同学习一下如何实现文字阴影的效果,将用到css3的另外一个属性text-shadow,这两个效果分别增强了图层和文字的质感,创建立体效果。
语法:
XML/HTML Code复制内容到剪贴板
text-shadow : none |none | [, ] *或none |[,]*
text-shadow:X轴上的位移(正负皆可),Y轴上的位移(正负皆可),阴影的宽度,阴影的颜色值
说明:和图层阴影相似,它也可以对同一对象应用一组或多组阴影效果,用逗号隔开。X轴偏移可以为正负,当X为正时向右偏移,为负时向左偏移。Y轴偏移可以为正负,当X为正时向下偏移,为负时向上偏移。阴影的颜色值可以是#xxx,也可以是rgb,还可以是rgba透明色。
实例:text-shadow
XML/HTML Code复制内容到剪贴板
雨打浮萍
显示效果如下:
对比box-shadow
XML/HTML Code复制内容到剪贴板
专注于web前端开发
效果如下:
显示效果如下:
html质感阴影_详解CSS3的图层阴影和文字阴影效果使用相关推荐
- fillcolor是什么意思_详解css3中 text-fill-color属性
text-fill-color是什么意思呢?单单从字面上来看就是"文本填充颜色",不过它实际也是设置对象中文字的填充颜色,和color的效果很相似.如果同时设置text-fill- ...
- css sheet2.0,详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
CSS3.0(Cascading Style Sheet) 层叠级联样式表 快速入门: CSS01 h1 { color: red; } 标题一 CSS的三种导入方式: 行内样式(优先级最高,但不建议 ...
- 大脑构造图与功能解析_大脑的结构和功能分区_详解人脑构造与功能
大脑的结构和功能分区 _ 详解人脑构造与功能 学习,可以开阔人的大脑 ; 学习,可以使人的大脑拥有更多的知识,人的大脑和肢 体一样,多用则灵,不用则废.那么下面学习啦小编给大家分享一些大脑的结构和功 ...
- html 字体模糊,详解css3使用transform出现字体模糊的解决办法
这个问题很奇葩,话不多少直接上代码: .g-dialog-wrapper { position: fixed; top: 50%; left: 50%; transform: translate(-5 ...
- 详解CSS3中新增的内容属性:content
详解CSS3中新增的内容属性:content 1. 用法: content属性用于插入生成的内容,常和:before选择器和:after选择器配合使用,将生成的内容放在一个元素内容的前面或后面. 2. ...
- 详解 CSS3中最好用的布局方式——flex弹性布局(看完就会)
文章包含个人理解,错误请指出. 往期css3文章 CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之移动 旋转 缩放(详细讲解看完就会 ...
- ANDROID L——Material Design详解(视图和阴影)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
- 传智播客html css3笔记,传智播客详解Css3九大常用属性
在Css3的学习和实际操作中,我们经常会接触到一些常用属性,比如字体.文本.列表和背景等.下面,传智播客将对常用的Css3九大属性进行详解. 1.传智播客详解Css3九大常用属性-字体 l Font- ...
- vscode自动加前缀_详解VScode自动补全CSS3前缀插件以及配置无效的解决办法
1.在vscode中搜索Autoprofixer 2.在安装完成之后要配置 在需要添加前缀的css文件上,右键点击命令面板,输入Autoprefixer CSS就好啦 ps: 如果想要兼容性最好的话, ...
最新文章
- 如何构建识别图像中字符的自动程序?一文解读OCR与HTR
- 基于纯 CSS3 技术实现美观的标签云效果
- 嵌入式 Hi3515视频编码(H.264)笔记
- 常用Jquery前端操作
- OpenStack精华问答 | OpenStack是云吗?
- docker 安装 mysql 并映射数据库存放路径及配置文件
- python 表格格式输出_Python笔记---DAY3:格式化输出、for循环、列表操作
- Android FloatingActionButton(圆形按钮)
- 2、网站重构之本地映射外网域名
- dis计算机领域中是什么意思,dis
- 北京邮电大学计算机学院考研夏令营,北京邮电大学计算机学院(专业学位)计算机技术保研夏令营...
- JAVA购物网站商城系统毕业设计 开题报告
- H3C路由器多出口NQA+TRACK实现冗余
- 某些Win10无法进入安全模式的修复
- WINDY数----数位dp
- cad中能够既刷新视图又能刷新计算机图形数据库,建筑CAD练习题.doc
- ORACLE的保留小数或整数函数
- Python,Power BI,excel,商业数据分析技能详解
- 图像深度、像素深度和位深度
- Python 使用 pip 安装 Matplotlib