CSS 常用属性之 阴影
text-shadow 是一个给文字添加阴影的属性
text-shadow: X偏移量,Y偏移量,模糊值,颜色 可以同时设置多个文本阴影,需要用逗号隔开
如果是需要兼容低版本的浏览器
-webkit-text-shadow
-moz-text-shadow
-o-text-shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {
text-align: center;
padding: 24px;
margin: ;
font-family: helvetica, arial, sans-serif;
color: #;
background-color: #;
font-size: 80px;
font-weight: bold;
text-shadow: 4px white,
-5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>
这是效果图
盒子阴影 box-shadow
box-shadow 属性和 text-shadow 属性差不多
使用方法 box-shadow:(inset内阴影 可选), x偏移量, y偏移量, 模糊值(可选), 阴影尺寸(可选), 颜色(可选)
也可以同时设置多个阴影,用逗号分隔
CSS 常用属性之 阴影的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- 02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
- CSS常用属性-xy
一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...
- css常用属性汇总
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...
- css常用属性1
1 背景相关 背景颜色 background-color = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- css常用属性总结:颜色和单位
在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚. 颜色 当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般 ...
- javascript之css常用属性
1. position : 属性值有absolute .fixed.relative absolute:生成绝对定位的元素,相对第一父元素进行定位: fixed : 生成绝对定位的元素,相对于浏览 ...
随机推荐
- web系统是否要前后端分离?
开发一个web管理系统,是否要采用如今流行的前后端分离模式? 首先要从为什么会出现前后端分离说起,前后端分离的目的. 1.让前端工程师(前端)和后端工程师(后端)们能够更加专注于自己的领域 传统的开发 ...
- firewalls 开放端口
# 1. 开放 tcp 80 端口 firewall-cmd --zone=public --add-port=10080/tcp --permanent # 2. 开放 10080 ~ 65535 ...
- 爬虫(三)解析js,抓取优酷免费视频的真实播放地址
工具:google浏览器 + fiddler抓包工具 说明:这里不贴代码,[只讲思路!!!] 原始url = https://v.youku.com/v_show/id_XMzIwNjgyMDgwOA ...
- swoole(3)网络服务模型(单进程阻塞、预派生子进程、单进程阻塞复用模型)
一:单进程阻塞 设计流程: 创建一个socket,绑定端口bind,监听端口listen 进入while循环,阻塞在accept操作上,等待客户端连接进入,进入睡眠状态,直到有新的客户发起connet ...
- 小白自学机器学习----3.令人头秃的pytorch安装 (No module named 'tools.nnwrap' 错误)
tensorflow 刚刚会写基础的模块了,今天找到研究方向的代码是pytorch实现的 总是看到这句话,人生苦短,我用pytorch 看来pytorch应该比tensorflow好学,但是!! py ...
- JS动画之缓动函数分析及动画库
上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...
- 前端每日实战:39# 视频演示如何用纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QxbmxJ 可交互视频教程 此视频 ...
- React解决长列表方案(react-virtualized)
github地址 高效渲染大型列表的响应式组件 使用窗口特性,即在一个滚动的范围内,呈现你给定数据的一小部分,大量缩减了呈现组件所需的时间,以及创建DOM节点的数量. 缺点:滑动过快,可能会出现空白的 ...
- TensorFlow入门知识
Tensorflow基本操作 Tensorflow是一种计算图模型,即用图的形式来表示运算过程的一种模型.Tensorflow程序一般分为图的构建和图的执行两个阶段.图的构建阶段也称为图的定义阶段,该 ...
- .NET Core 3.x之下的配置框架
一.配置框架的核心类库 首先我们使用.NET Core的配置框架需要安装额外的NuGet扩展包,下面是列举最常用的几个扩展包以及所对应的配置功能 NuGet Package Description M ...