box-shadow:inset 30px 40px 20px #f00;

如上实例，总共五个参数，其中第一个代表阴影是向内阴影还是向外阴影，第二个参数代表向右（从左向右）的偏移量，第三个参数代表向下的偏移量，第四个参数代表阴影的距离，越大越模糊，第五个代表阴影的颜色，截图如下

如果去掉第一个参数，那么是这样的

text-shadow: .3px 4px 2px #f00;

这个和上面的类似，只是没有第一个参数

完整代码

<html>

  <head>

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <style type="text/css">

.box1{

box-shadow: 30px 40px 20px #f00;

border:1px solid blue;

width:200px;

height:200px;

margin:200px;

}

.box2{

text-shadow: .3px 4px 2px #f00;

border:1px solid blue;

width:200px;

height:200px;

margin:200px;

font-size:50px;

}

</style>

    <title></title>

  </head>

  <body>

	<div class=box1></div>

	<div class=box2>fsadfsadfsadf</div>

  </body>

</html>

box-shadow,text-shadow的更多相关文章

  1. CSS3 笔记三（Shadow/Text/Web Fonts）

    CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...

  2. (转)Shadow Map & Shadow Volume

    转自:http://blog.csdn.net/hippig/article/details/7858574 shadow volume 这个术语几乎是随着 DOOM3 的发布而成为FPS 玩家和图形 ...

  3. 纯div+css制作的弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JS21. 使用原生JS封装一个公共的Alert插件（HTML5: Shadow Dom）

    效果预览 Shadow DOM Web components  的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整 ...

  5. shadow dom

    初识shadow dom 我们先看个input="range"的表现: what amazing ! 一个dom能表现出这么多样式嘛? 无论是初学者和老鸟都是不肯相信的,于是在好奇 ...

  6. Qt Quick里的图形效果：阴影（Drop Shadow）

    Qt Quick提供了两种阴影效果: DropShow,阴影.这个元素会根据源图像,产生一个彩色的.模糊的新图像,把这个新图像放在源图像后面,给人一种源图像从背景上凸出来的效果. InnerShado ...

  7. 理解Shadow DOM(一)

    1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...

  8. 究竟什么是Shadow DOM？

    shadow dom 是什么? 顾名思义,shadow dom直译的话就是影子dom,但我更愿把它理解为DOM中的DOM.因为他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文 ...

  9. 【shadow dom入UI】web components思想如何应用于实际项目

    回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...

  10. 【OpenGL】如何绘制Shadow

    背景 Shadow即阴影,它是光线被不透明物体遮挡而产生的黑暗区域,与光源的方向相反. 在Blender中编辑过程中没有Shadow,只有在经过渲染后才能显示.目前有一个基于Blender的项目,要求 ...

随机推荐

  1. PAT 旧键盘

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及实际被输入的文字,请你列出肯定坏掉的那些键. 输入格式: 输入在 2 行中分别给出应该输入的文字.以及 ...

  2. node实现图片分割

    前言 最近,女王大大日常找我弄图片,本来之前我一直是ps帮他弄得,后来- -,ps不能分割过长的图片,我就想想能不能通过代码来帮他实现好了. 经过我在npm搜索一番,发现没有一个纯代码层面的high ...

  3. Cordova+ionic+angular 项目从 UIWebView 更换为 WKWebView ，通过IOS审核

    当前 cordova-ios 最新版本 5.1.1 新版本 cordova-ios 将删除 UIWebView 代码中的所有引用.WKWebView 将是 Cordova 的默认 Web 视图.   ...

  4. Python 导入CSV、JSON、XML数据

    常见的机器可读格式包括: - 逗号分隔值(Comma-Separated Values,CSV)- 制表符分隔值(tab-separated values,TSV)- JavaScript 对象符号( ...

  5. 【Spring注解驱动开发】在@Import注解中使用ImportSelector接口导入bean

    写在前面 在上一篇关于Spring的@Import注解的文章<[Spring注解驱动开发]使用@Import注解给容器中快速导入一个组件>中,我们简单介绍了如何使用@Import注解给容器 ...

  6. DML_Data Modification_INSERT

    Data Modification (INSERT.DELETE.UPDATE.MERGE)之INSERT(基础知识,算是20年来第2次学习MSSQL吧,2005年折腾过一段时间的Oracle)INS ...

  7. mysql HAVING用法

    原文链接:https://www.cnblogs.com/mr-wuxiansheng/p/11188733.html having字句可以让我们筛选分组之后的各种数据,where字句在聚合前先筛选记 ...

  8. .Net Core基础的健康检查

    前言 健康检查能查看我们的应用程序当前是否是一个健康的运行状态.微软已经给我们提供了健康检查轮子,只需要简单的配置就能完成服务的状态检查.一起来实现一个最简单的健康检查吧. 开始 新建一个空的webA ...

  9. 如何 SSH 到 Linux 服务器里的特定目录及执行命令？

    你是不是有遇到过这样的场景?使用 SSH 命令进入到服务器,然后再用 cd 命令进入到对应目录,再继续进行你的工作. 这种操作对于新手来讲特别常见,良许之前也是这样.在本文,老司机将带你来进行更高效的 ...

  10. 团队进行Alpha冲刺--项目测试

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺--项目测试 作业正文 如下 其他参 ...