css box-shadow(text-shadow) 阴影学习备忘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0px;
padding:0px;
} #test{
position: absolute;
top: 0px;
left: 0px;
right:0px;
bottom:0px;
width:500px;
height:500px;
margin:auto;
background-color: #ccc;
font-family: "楷体";
font-size: 30px;
text-align: left;
padding:5px 10px;
line-height: 40px;
box-shadow: 10px 20px 10px 10px #ccc, 30px 30px 10px 10px #c3c3c3;
overflow: auto;
}
</style>
</head>
<body>
<div id="test">浔阳江头夜送客,枫叶荻花秋瑟瑟。主人下马客在船,举酒欲饮无管弦。醉不成欢惨将别,别时茫茫江浸月。忽闻水上琵琶声,主人忘归客不发。寻声暗问弹者谁,琵琶声停欲语迟。移船相近邀相见,添酒回灯重开宴。千呼万唤始出来,犹抱琵琶半遮面。转轴拨弦三两声,未成曲调先有情。弦弦掩抑声声思,似诉平生不得志。低眉信手续续弹,说尽心中无限事。轻拢慢捻抹复挑,初为《霓裳》后《六幺》。大弦嘈嘈如急雨,小弦切切如私语。嘈嘈切切错杂弹,大珠小珠落玉盘。间关莺语花底滑,幽咽泉流冰下难。冰泉冷涩弦凝绝,凝绝不通声暂歇。别有幽愁暗恨生,此时无声胜有声。银瓶乍破水浆迸,铁骑突出刀枪鸣。曲终收拨当心画,四弦一声如裂帛。东船西舫悄无言,唯见江心秋月白。沉吟放拨插弦中,整顿衣裳起敛容。自言本是京城女,家在虾蟆陵下住。十三学得琵琶成,名属教坊第一部。曲罢曾教善才服,妆成每被秋娘妒。五陵年少争缠头,一曲红绡不知数。钿头银篦击节碎,血色罗裙翻酒污。今年欢笑复明年,秋月春风等闲度。弟走从军阿姨死,暮去朝来颜色故。门前冷落鞍马稀,老大嫁作商人妇。商人重利轻别离,前月浮梁买茶去。去来江口守空船,绕船月明江水寒。夜深忽梦少年事,梦啼妆泪红阑干。我闻琵琶已叹息,又闻此语重唧唧。同是天涯沦落人,相逢何必曾相识!我从去年辞帝京,谪居卧病浔阳城。浔阳地僻无音乐,终岁不闻丝竹声。住近湓江地低湿,黄芦苦竹绕宅生。其间旦暮闻何物?杜鹃啼血猿哀鸣。春江花朝秋月夜,往往取酒还独倾。岂无山歌与村笛?呕哑嘲哳难为听。今夜闻君琵琶语,如听仙乐耳暂明。莫辞更坐弹一曲,为君翻作《琵琶行》。感我此言良久立,却坐促弦弦转急。凄凄不似向前声,满座重闻皆掩泣。座中泣下谁最多?江州司马青衫湿。</div>
</body>
</html>
1、(具有宽高)元素的阴影
box-shadow属性接收一个由5个参数组成的值,每个值的意思如下:
h-shadow: 水平阴影的位置,可以为负值,默认向右,负值向左。
v-shadow:垂直阴影的位置,可以为负值,默认向下,负值向上。
blur:模糊距离
spread:阴影的尺寸
color:阴影的颜色
备注:box-shadow 可以设置过个阴影。
相关知识复习,字体大小,line-height: (字体行高,可以实现字体居中),overflow:auto(内容超出容器高度,自动显示滚动条)
box-shadow: 10px 20px 10px 30px black, 30px 30px 10px 10px #c3c3c3;
效果:

2、 文字的阴影
text-shadow属性接收一个由4个参数组成的值,每个值的意思如下:
h-shadow: 水平阴影的位置,可以为负值,默认向右,负值向左。
v-shadow:垂直阴影的位置,可以为负值,默认向下,负值向上。
blur:模糊距离
color:阴影的颜色
text-shadow: 1px 2px 1px gray; 效果:

css box-shadow(text-shadow) 阴影学习备忘的更多相关文章
- Android学习备忘笺01Activity
01.设置视图 在Android Studio新建的项目中,通过 setContentView(R.layout.activity_main);方法将res/layout/activity_main. ...
- leaflet 学习备忘
leaflet 开源js地图工具.非常好用. leaflet参考:http://leafletjs.com/ 特性: 完全开源,可以基于不同的第三方瓦片生成地图. 基于原始GPS,无需转换 可创建离线 ...
- CSS学习备忘
CSS样式控制行间距,用line-height 测试一下: <div style="line-height:6px"> 111<br> 222<br& ...
- vue2.0 mintUI 学习备忘
一 技术栈:vuecli+vuejs2+mintUI+axios vuecli :脚手架工具 vuejs:前端框架 mintUI:基于vuejs移动端UI axios:vuejs ajax数据交互 ...
- UML学习备忘
两大类UML图: 行为图(behavior diagrams)和结构图(structure diagrams) 行为图将引导系统分析员分析且理清"系统该做些什么"?系统分析 ...
- easyUi学习备忘
1.获取datagrid的自身相关的属性方式: jQuery("#grid").datagrid("options").height jQuery(" ...
- Git学习备忘
本文参考廖雪峰写的精彩的git学习文档,大家可以直接去官网看原版,我这里只是便于自己记录梳理 原版地址:http://www.liaoxuefeng.com/wiki/0013739516305929 ...
- Android学习备忘笺02Fragment
Android中Fragment可以将UI界面分成多个区块,一般静态或动态添加Fragment. 01.新建Fragment实例 一个Fragment实例包括两个部分:类对象和布局文件(可视化部分). ...
- xml 基础学习备忘
<?xml version="1.0" encoding="UTF-8"? standalone="yes"> 这里的encod ...
随机推荐
- JavaWeb----Servler
Servlet简介 Servlet就是sun公司开发动态web的一门技术 Sun在这些API中提供一个接口叫做:Servlet,如果你想开发一个Servlet程序,只需要完成两个小步骤: 编写一个类, ...
- Django model重写save方法及update踩坑记录
一个非常实用的小方法 试想一下,Django中如果我们想对保存进数据库的数据做校验,有哪些实现的方法? 我们可以在view中去处理,每当view接收请求,就对提交的数据做校验,校验不通过直接返回错误, ...
- Java——字符串操作
/** * java字符串操作 * @author wydream * */ public class StringTest { public static void main(String[] ar ...
- 搜索+简单dp
前言:即使是简单的递归,在复杂度过高时也可以使用简单的dp. 一般有两种情况,一是利用dp思想求最优子结构进行搜索剪枝,二是利用搜索进行dp数组的填充. 例题一.hdu1978 题目大意:这是一个简单 ...
- 使用 if elseif else 指定条件
nrows = 4; ncols = 6; A = ones(nrows,ncols); 遍历矩阵并为每个元素指定一个新值.对主对角线赋值 2,对相邻对角线赋值 -1,对其他位置赋值 0. for c ...
- docker-compose安装rabbitmq
编写时间:2020-05-08 参考文档:docker安装rabbitmq 1. 编写docker-compose.yml version: '3' services: rabbitmq: image ...
- spring学习笔记(二)spring中的事件及多线程
我们知道,在实际开发中为了解耦,或者提高用户体验,都会采用到异步的方式.这里举个简单的例子,在用户注册的sh时候,一般我们都会要求手机验证码验证,邮箱验证,而这都依赖于第三方.这种情况下,我们一般会通 ...
- 保姆式教学:Typora+图床功能
众所周知,markdown编辑器typora是一款很好的可视化.所见即所得型的编辑器! 但是,因为图片问题,本菜狗常常不能把某些写好的markdown文档直接复制粘贴进博客而不加修改-- 不过,前几天 ...
- JVM 虚拟机&&类加载(一)
虚拟机 虚拟机简介 Java 虚拟机(JVM)是运行java程序的抽象计算机,它是计算机设备的规范,可以采用不同方式进行实现,java 程序通过运行在JVM中实现跨平台,一次编译到处运行,不同的操作系 ...
- Nacos系列(一):Nacos环境安装及Hello World示例
现在微服务架构越来越火,微服务架构中比较重要的一项就是配置中心, Nacos是阿里巴巴的一个开源项目,它的其中一个功能就是可以作为配置中心,实现配置的动态变更.历史版本对比.配置回滚等功能. 更多的描 ...