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实现扑克牌移动

    /* 下面代码模拟了一套扑克牌(初始排序 A~K,共 13 张)的操作过程. 操作过程是: 手里拿着这套扑克牌,从前面拿一张放在后面,再从前面拿一张放桌子上,再从前面拿一张放在后面,.... 如此循环 ...

  2. Linux: ssh命令 远程登录

    1.查看SSH客户端版本 使用ssh -V命令可以得到版本号.需要注意的是,Linux一般自带的是OpenSSH; $ ssh -V ssh: SSH Secure Shell 3.2.9.1 (no ...

  3. Java实现定时任务的三种简单方法

    第一种方法: /** * 先定义一个任务每天执行的时间点,再写一个死循环,不断地拿当前时间和事先定义的时间去比对,若到时间则执行任务 */ @Test public void test1() { St ...

  4. Spark原始码系列（六）Shuffle的过程解析

      问题导读: 1.shuffle过程的划分? 2.shuffle的中间结果如何存储? 3.shuffle的数据如何拉取过来? Shuffle过程的划分 Spark的操作模型是基于RDD的,当调用RD ...

  5. 使用matplotlib进行可视化

    转自:https://blog.csdn.net/qq_30614345/article/details/99049790 https://blog.csdn.net/qq_30614345/arti ...

  6. mysql面试题总结

    Mysql中的myisam与innodb的区别? InnoDB存储引擎的四大特性? 什么是事务? 数据库事务的四大特性? 不考虑事务的隔离性,会发生几种问题? MySQL数据库提供的四种隔离级别? 有 ...

  7. 通过char与varchar的区别，学习可变长的字符类型

    转自http://www.uphtm.com/database/232.html 在mysql教程中char与varchar的区别呢,都是用来存储字符串的,只是他们的保存方式不一样罢了,char有固定 ...

  8. <前端 js 实现 代码雨 >

    前端  js 实现 代码雨: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. 一起玩转微服务（10）——spring boot介绍

    对于Spring,相信大家都非常熟悉,从出现开始,一直是企业级开发的主流.但是随着软件的发展和应用开发的不断演化,它的一些缺点也逐渐胡暴露了出来,下面,我们就一起看一下Spring的发展历程并且认识一 ...

  10. React实战教程之从零开始手把手教你使用 React 最新特性Hooks API 打造一款计算机知识测验App

    项目演示地址 项目演示地址 项目代码结构 前言 React 框架的优雅不言而喻,组件化的编程思想使得React框架开发的项目代码简洁,易懂,但早期 React 类组件的写法略显繁琐.React Hoo ...