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. java实现第六届蓝桥杯隔行变色

    隔行变色 隔行变色 Excel表的格子很多,为了避免把某行的数据和相邻行混淆,可以采用隔行变色的样式. 小明设计的样式为:第1行蓝色,第2行白色,第3行蓝色,第4行白色,- 现在小明想知道,从第21行 ...

  2. TZOJ 车辆拥挤相互往里走

    102路公交车是crq经常坐的,闲来无聊,他想知道最高峰时车上有多少人,他发现这辆车只留一个门上下人,于是他想到了一个办法,上车时先数一下车上人员数目(crq所上的站点总是人不太多),之后就坐在车门口 ...

  3. 总结：Jmeter常用参数化方式

    一.从CSV文件中读取 二.通过函数生成 三.用户自定义变量 四.用户参数 五.使用正则表达式提取 六.从数据库中读取

  4. xmake v2.3.4 发布, 更加完善的工具链支持

    为了让xmake更好得支持交叉编译,这个版本我重构了整个工具链,使得工具链的切换更加的方便快捷,并且现在用户可以很方便地在xmake.lua中扩展自己的工具链. 关于平台的支持上,我们新增了对*BSD ...

  5. 5、react-路由

    1.单页面:(只有一个index.html)(为什么要使用react-router再react中) 所有的组件都是再同一个index.html中进行显示的,它再显示的时候是怎么显示的,通过你点击的连接 ...

  6. Python 抓取网页tag操作

    1. 获取操作tag 获取操作tag的接种方式: soup.find_all(name=None, attrs={}, recursive=True, text=None, limit=None, * ...

  7. 写了个全局变量的bug，被同事们打脸！！！

    话说栈长前阵子写了一个功能,测试 0 bug 就上线了,上线后也运行好好的,好多天都没有人反馈bug,超爽.. 不出问题还好,出问题就是大问题.. 最近有个客户反馈某些数据混乱问题,看代码死活看不出什 ...

  8. Bash知识点记录

    变量的设置规则   1.  等号两边不能直接接空格符.   2. 右侧的变量内容若有空格符,可使用双引号或单引号将变量内容括起来,其中, 双引号内的特殊字符如 $ 等,可以保有原本的特性.如下所示: ...

  9. @hdu - 6607@ Easy Math Problem

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 求: \[\sum_{i=1}^{n}\sum_{j=1}^{n ...

  10. @luogu - P6109@ [Ynoi2009]rprmq

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 有一个 n×n 的矩阵 a,初始全是 0,有 m 次修改操作和 ...