css3文字阴影和盒子阴影
文字阴影
文字阴影的语法格式:
text-shadow:水平向右的偏移值 向下的偏移值 迷糊度 阴影的颜色,水平向右的偏移值 向下的偏移值 迷糊度 阴影的颜色;
可以有多个阴影，但是在实际的项目中最多一个阴影就可以了。
<style>
div {
font-size: 100px;
text-align: center;
/* 水平方向向右移动5px,垂直方向向下移动10px, 迷糊度[值越大越模糊], 阴影的颜色 */
/* 当水平方向的值是负值的时候，将向左移动*/
text-shadow: 5px 10px 20px red;
}
</style>
<body>
<div>雪月剑仙-李寒衣</div>
</body>
盒子阴影box-shadow
盒子阴影的语法格式： 水平偏移值，垂直偏移值，模糊度，向外延的值，颜色，内置阴影(inset)
内置阴影在盒子的左上角；默认情况阴影是在盒子的右下角。
<style>
div {
width: 300px;
height: 100px;
/* 水平偏移值，垂直偏移值， 阴影颜色 */
box-shadow: 10px 10px pink;
}
</style>
<div>雪月剑仙-李寒衣</div>
div {
width: 300px;
height: 100px;
/* 水平偏移值，垂直偏移值，模糊度， 阴影颜色 */
box-shadow: 10px 10px 5px pink;
}
让盒子的四周有阴影
div {
width: 300px;
height: 100px;
/* 水平偏移值，垂直偏移值，模糊度， 阴影颜色 */
box-shadow: 0px 0px 16px pink;
}
<div>雪月剑仙-李寒衣</div>
盒子阴影外延值
div {
margin-top: 50px;
width: 300px;
height: 100px;
/* 水平偏移值，垂直偏移值，模糊度，向外延的值，阴影颜色 */
box-shadow: 0px 0px 16px 4px pink;
}
<div>雪月剑仙-李寒衣</div>
内置阴影
div {
width: 300px;
height: 100px;
margin: 20px;
/* 内置阴影在盒子的内部 */
box-shadow: 0px 0px 16px 4px pink inset;
}
<div>雪月剑仙-李寒衣</div>
css3文字阴影和盒子阴影的更多相关文章
- CSS3 --添加阴影（盒子阴影、文本阴影的使用）
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css学习_css文字阴影、盒子阴影
文字阴影和盒子阴影的用法: 多阴影
- css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...
- css3新增（圆角边框(border-radius)，盒子阴影(box-shadow)，文字阴影(text-shadow)，背景缩放(background-size)）
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...
- CSS3文字阴影实现乳白文字效果
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...
- CSS学习笔记-盒子阴影及文字阴影
盒子阴影: 1.格式: box-shadow:h-shadow v-shadow blur spread color insert; box-shadow:水平偏移 ...
- HTML连载70-相片墙、盒子阴影和文字阴影
一. 制作一个相片墙 二. <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS3盒子阴影box-shadow
来自W3CSchool的解释 语法: box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影. ...
随机推荐
- Scrum Master们，难道每天都在摸鱼？
摘要:众所周知,Scrum Master是服务型领导--其本身不参与日常的研发工作,写代码.改Bug的工作都让团队干了,Scrum Master到底干了啥?Scrum Master工作的好坏应该如何衡 ...
- C# WPF 将第三方DLL嵌入 exe
没成功,只是做个记录,后面再研究 希望将第三方的 HandyControl.dll 嵌入到 exe 中,这样不用发多个文件给别人 将第三方DLL.加载到解决方案中 添加引用 将"属性页&qu ...
- MVCC多版本并发控制和幻读问题的解决
首先我们先介绍一下锁的分类,再进入今天的正题. 一.锁分类: 1.从性能上分:乐观锁.悲观锁.乐观锁(用版本号对比或CAS机制)适用于读比较多的场景,悲观锁适用于写比较多的场景.如果在写比较多的场景使 ...
- 【开源项目推荐】——纯中文本地GPT知识库搭建项目.assets
大家好,我是独孤风. 又到了本周的开源项目推荐.近一年多的时间,人工智能迎来了大爆发.GPT相关的大模型的发展让很多领域都发生了巨大的变化. 但是虽然GPT的自然语言识别功能异常的强大,但回答给我们的 ...
- ABAP步循环
一.在界面中循环输出行数据,屏幕直接画出行数,需要计算翻页,一旦界面行数变动,则需要更改代码,所以引入步循环 二.步循环 首先在界面上画出要展示的内容 注意,在步循环中,文本的名称和输入框的名称不能相 ...
- KYOCERA Programming Contest 2021（AtCoder Beginner Contest 200）（AB水题，C思维，D搜索，E DP）
补题链接:Here A - Century 整除 \(200\) 并且判断能否整除完全 B - 200th ABC-200 按题意即可 C - Ringo's Favorite Numbers 2 求 ...
- 2017年第八届 蓝桥杯B组C/C++决赛题目
部分题目示意图来自网络,所以会带水印 最后编辑时间: 2021年5月12日 统一声明 如果不写默认带有常用头文件 如果不表明主函数默认表示在 void solve(){} 默认使用 using nam ...
- 聊聊与前端工程师天然互补的 Serverless
作者:灵轮_(阿里云前端技术专家)_ 作为前端工程师,我们的使命是为用户提供良好的前端用户体验.随着云原生时代的到来,显而易见的,我们能做的更多了.Serverless 产品的特点是免运维.按量付费和 ...
- AI正在改变人类社会 - 内容行业的衰落
现在的 AI 技术,每天都在进化.我有一种感觉,普通人大概没意识到,它马上就要改变人类社会了. 历史上,这种事一再发生.在你不知不觉中,某些大事件悄悄酝酿,突然就冲击到了你的生活,将你的人生全部打乱, ...
- WPF Prism框架Region失效了？
站长最近转载了痕迹的Prism 8系列博文,不知道你对该框架是否有一定了解了?不了解,可以看看本号转载的系列: WPF Prism框架合集(2.创建Prism应用程序) WPF Prism框架合集(3 ...