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实现递归连续数
递归连续数 以下程序打印出0~9的数字,请补充缺少的代码. public class MyTest { public static void f(int begin, int end) { _____ ...
- java实现第二届蓝桥杯四方定理
四方定理. 数论中有著名的四方定理:所有自然数至多只要用四个数的平方和就可以表示. 我们可以通过计算机验证其在有限范围的正确性. 对于大数,简单的循环嵌套是不适宜的.下面的代码给出了一种分解方案. 请 ...
- java实现第六届蓝桥杯牌型整数
牌型整数 题目描述 小明被劫持到X赌城,被迫与其他3人玩牌. 一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花色,只考虑点数,也不 ...
- 2018年全国多校算法寒假训练营练习比赛（第二场）H-了断局
题目描述 既然是了断局了,大家就随便玩玩数字呗.已知一个数列前十项分别是{0, 1, 1, 2, 4, 7, 13, 24, 44, 81},小G不满足呀:我要更多的数!!!不给就不让你们玩了.小G会 ...
- 使用wrk进行http压力测试
Posted by 微博@Yangsc_o 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0 最近做了一些服务器的工作,在做htt ...
- KVM虚拟机使用NAT+iptables做端口映射
环境介绍 有一个KVM宿主机,一个外网IP绑定在了宿主服务器上,但是希望直接用ssh访问上面的所有虚拟机,还想虚拟机提供外网服务, 解决方法如下: 环境为RHEL6.3,外网IP为 61.155.xx ...
- Spark Streaming，Flink，Storm，Kafka Streams，Samza：如何选择流处理框架
根据最新的统计显示,仅在过去的两年中,当今世界上90%的数据都是在新产生的,每天创建2.5万亿字节的数据,并且随着新设备,传感器和技术的出现,数据增长速度可能会进一步加快. 从技术上讲,这意味着我们的 ...
- 如何解决flutter中gradle慢的问题
初学flutter的时候,flutter run运行到有gradle的时候就停住不动了,研究后解决方法如下: 打开项目目录 中的 ...\myapp\android\gradle\wrapper\gr ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（三）
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- openshift v1.5 不能登录system:admin 问题
这个好像是无法解决的,我按照github和google所有步骤试过了,还是不能登录system:admin .需要密码.弄了两个小时,后来放弃了,直接使用新版本3.6的,按照官网方法部署,可以使用直接 ...