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. [bx] and loop

    1.[bx] 表示一个内存单元,它的偏移地址在bx中 mov al,[bx] 2.描述符号() 来表示一个寄存器或一个内存单元中的内容. 约定符号idata表示常量. 3.loop 标号 CPU在执行 ...

  2. k8s学习-安全

    4.8.安全 4.8.1.概念 一些内容可参考4.6.2.Secret的内容 说明 Kubernetes 作为一个分布式集群的管理工具,保证集群的安全性是其一个重要的任务.API Server 是集群 ...

  3. 01.vue-router的基本使用

    Vue前端路由 1. npm install vue-router --save 2.脚手架安装 一.目录结构 二.index.js // 0.导入vue和路由插件 import Vue from ' ...

  4. 【网页设计】第四周 JavaSript

    第四周  JSP 一  JSP概述 含义: Java Server Pages, 广泛使用的服务器端脚本语言之一:(运行在服务器端  BS结构) 由服务器端的JSP引擎执行JSP代码,然后将结果以HT ...

  5. ibatis BindingException Parameter 'status' not found. Available parameters are [arg1, arg0, param1, param2] 解决方法

    最近做项目测试mapper接口时出现了下面这个异常,接口的函数参数找不到,网上搜索发现可能是@Param注解问题. 查阅Mybatis官方文档对@Param的解释如下: 在代码中加入, 异常消失 测试 ...

  6. vue甘特图gantt

    vue做甘特图,先大致介绍下核心功能: (1)横轴.纵轴拖拽: (2)自定义监听点击事件(双击.右键等)(3)任务之间显示父子层级关系:(4)左侧列表信息,右侧时间轴表示任务:(5)每个任务可以订制样 ...

  7. DockerFile构建镜像和Docker仓库

    利用commit理解镜像构成 注意: docker commit 命令除了学习之外,还有一些特殊的应用场合,比如被入侵后保存现 场等.但是,不要使用 docker commit 定制镜像,定制镜像应该 ...

  8. BrainF**k的编译器

      按照语法编写了这个"编译器"(对于解释性语言而言"编译"二字的确很奇怪).   功能:     1."编译".运行一个后缀为 '.bf' ...

  9. sourcetree 安装破解注册方法

    1.下载sourcetree安装包 2.点击安装到下图步骤 3.在网盘中下载accounts.json  文件,( 链接:https://pan.baidu.com/s/1tJd_xCh-B-oOwd ...

  10. WPF入门（2）——依赖属性

    今天我们说说依赖属性 什么是依赖属性? 当然,学术定义依旧Please Baidu:https://baike.baidu.com/item/%E4%BE%9D%E8%B5%96%E5%B1%9E%E ...