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. 【python】【开源】使用Tkinter和matplotlib实时显示图像，打造属于自己的性能测试小工具

    在腾讯的perfdog工具还未公开时,当时需要查看内存使用情况等信息,就用python写了个小工具 为了提升开发效率,就直接借用了雷子开源的性能测试工具的布局,自己美化了一下,然后加入了实时显示数据的 ...

  2. 1.keras-构建基本简单网络实现线性回归

    构建基本简单网络实现线性回归 1.创建数据绘制散点图 import keras import numpy as np import matplotlib.pyplot as plt from kera ...

  3. Linux命令总结大全，包含所有linux命令

    使用说明:此文档包含所有的Linux命令,只有你想不到的没有你看不到的,此文档共计10万余字,有8400多行,预计阅读时间差不多需要3个小时左右,所以要给大家说一说如何阅读此文档 为了方便大家阅读,我 ...

  4. 强类型sql生成助手类

    不使用表达式树,使用强类型生成where子句,好处是性能高,相比表达式树生成的sql,10倍+ 目前只支持生成where条件.查询语句,后期会增加生成Update SQL where子句支持相等.比较 ...

  5. 详解 Flink DataStream中min(),minBy(),max(),max()之间的区别

    解释 官方文档中: The difference between min and minBy is that min returns the minimum value, whereas minBy ...

  6. mac 排查被占端口

    Last login: Wed Sep :: on ttys000 sam:~ sam$ sudo lsof -i : Password: COMMAND PID USER FD TYPE DEVIC ...

  7. javaweb之Servlet,http协议以及请求转发和重定向

    本文是作者原创,版权归作者所有.若要转载,请注明出处. 一直用的框架开发,快连Servlet都忘了,此文旨在帮自己和大家回忆一下Servlet主要知识点.话不多说开始吧 用idea构建Servlet项 ...

  8. Dorado开发——树形下拉框

    最近在学习Dorado开发的过程中,遇到了一个问题,Dorado的树形下拉框选择:Dorado默认情况下父节点和子节点都是可选的,而我要实现的是父节点不可选. 解决办法:在下拉框中,判断父子节点,点击 ...

  9. 重学 Java 设计模式：实战享元模式「基于Redis秒杀，提供活动与库存信息查询场景」

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 程序员‍‍的上下文是什么? 很多时候一大部分编程开发的人员都只是关注于功能的实现,只 ...

  10. matplotlib.pyplot.plot详解

    参考资料: https://blog.csdn.net/baidu_41902768/article/details/80686608 之前的随笔也有说过,matplotlib是python中一个非常 ...