box-shadow,text-shadow
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的更多相关文章
- CSS3 笔记三（Shadow/Text/Web Fonts）
CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...
- (转)Shadow Map & Shadow Volume
转自:http://blog.csdn.net/hippig/article/details/7858574 shadow volume 这个术语几乎是随着 DOOM3 的发布而成为FPS 玩家和图形 ...
- 纯div+css制作的弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS21. 使用原生JS封装一个公共的Alert插件（HTML5: Shadow Dom）
效果预览 Shadow DOM Web components 的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整 ...
- shadow dom
初识shadow dom 我们先看个input="range"的表现: what amazing ! 一个dom能表现出这么多样式嘛? 无论是初学者和老鸟都是不肯相信的,于是在好奇 ...
- Qt Quick里的图形效果：阴影（Drop Shadow）
Qt Quick提供了两种阴影效果: DropShow,阴影.这个元素会根据源图像,产生一个彩色的.模糊的新图像,把这个新图像放在源图像后面,给人一种源图像从背景上凸出来的效果. InnerShado ...
- 理解Shadow DOM(一)
1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...
- 究竟什么是Shadow DOM？
shadow dom 是什么? 顾名思义,shadow dom直译的话就是影子dom,但我更愿把它理解为DOM中的DOM.因为他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文 ...
- 【shadow dom入UI】web components思想如何应用于实际项目
回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...
- 【OpenGL】如何绘制Shadow
背景 Shadow即阴影,它是光线被不透明物体遮挡而产生的黑暗区域,与光源的方向相反. 在Blender中编辑过程中没有Shadow,只有在经过渲染后才能显示.目前有一个基于Blender的项目,要求 ...
随机推荐
- Java实现第十届蓝桥杯等差数列
试题 I: 等差数列 时间限制: 1.0s 内存限制: 512.0MB 本题总分:25 分 [问题描述] 数学老师给小明出了一道等差数列求和的题目.但是粗心的小明忘记了一 部分的数列,只记得其中 N ...
- NumPy之计算两个矩阵的成对平方欧氏距离
问题描述 设 \({X_{m \times k}} = \left[ {\vec x_1^T;\vec x_2^T; \cdots ;\vec x_m^T} \right]\) (; 表示纵向连接) ...
- KMP 知识点整理
1.扩展KMP 2.最大表示法 3.最小表示法 (扩展KMP) hdu2594 模板题 #include <iostream> #include <cstdio> #incl ...
- Python--编码转换
# -*- coding:gbk -*- # 即使设置文件编码为gbk,下方定义的字符串s1依旧为unicode # 获取默认编码格式 import sys print(sys.getdefaulte ...
- 基于ABP做一个简单的系统——实战篇：2.代码生成器
上一篇正说着呢,代码生成器就来了. 1.适用于ABP官网的Startup Template V3.x的包含了登录.用户等页面的MPA应用模板2.当前view仅支持文本框生成,远期规划根据字段类型生成不 ...
- abp-CMS模块-广告
无论是开发app还是网站,可能都需要一个广告功能,比如我们常见的在首页有个轮播广告,里面会轮播显示多个图片.还有比如一个新闻门户网站 很常见的 banner横幅广告,还有js特效广告等.本篇说说在ab ...
- 调用webservice接口，报错：(十六进制值0x01)是无效的字符
#事故现场 调用webservice接口,报错:(十六进制值0x01)是无效的字符. 如图: 意思是webservice返回的信息中包含无效的字符,无法解析成xml: #分析 使用postman向we ...
- @atcoder - ARC077F@ SS
目录 @description@ @solution@ @accepted code@ @details@ @description@ 规定一个字符串为 "偶串" 当且仅当它可以表 ...
- Censoring【KMP算法+堆栈模拟】
Censoring 传送门:链接 来源:UPC8203 题目描述 Farmer John has purchased a subscription to Good Hooveskeeping ma ...
- 设计一个简单的多线程(Fecit)_1
D6高级编程,Fecit ,学习里面关于线程创建的一个例子.,按照那个例子做的,不过本人喜欢将线程实现部分作为单独的单元,主线程再调用它. unit Unit1; interface uses Win ...