css3文字阴影和盒子阴影
文字阴影
文字阴影的语法格式:
text-shadow:水平向右的偏移值 向下的偏移值 迷糊度 阴影的颜色,水平向右的偏移值 向下的偏移值 迷糊度 阴影的颜色;
可以有多个阴影，但是在实际的项目中最多一个阴影就可以了。
<style>
div {
font-size: 100px;
text-align: center;
/* 水平方向向右移动5px,垂直方向向下移动10px, 迷糊度[值越大越模糊], 阴影的颜色 */
/* 当水平方向的值是负值的时候，将向左移动*/
text-shadow: 5px 10px 20px red;
}
</style>
<body>
<div>雪月剑仙-李寒衣</div>
</body>
盒子阴影box-shadow
盒子阴影的语法格式： 水平偏移值，垂直偏移值，模糊度，向外延的值，颜色，内置阴影(inset)
内置阴影在盒子的左上角；默认情况阴影是在盒子的右下角。
<style>
div {
width: 300px;
height: 100px;
/* 水平偏移值，垂直偏移值， 阴影颜色 */
box-shadow: 10px 10px pink;
}
</style>
<div>雪月剑仙-李寒衣</div>
div {
width: 300px;
height: 100px;
/* 水平偏移值，垂直偏移值，模糊度， 阴影颜色 */
box-shadow: 10px 10px 5px pink;
}
让盒子的四周有阴影
div {
width: 300px;
height: 100px;
/* 水平偏移值，垂直偏移值，模糊度， 阴影颜色 */
box-shadow: 0px 0px 16px pink;
}
<div>雪月剑仙-李寒衣</div>
盒子阴影外延值
div {
margin-top: 50px;
width: 300px;
height: 100px;
/* 水平偏移值，垂直偏移值，模糊度，向外延的值，阴影颜色 */
box-shadow: 0px 0px 16px 4px pink;
}
<div>雪月剑仙-李寒衣</div>
内置阴影
div {
width: 300px;
height: 100px;
margin: 20px;
/* 内置阴影在盒子的内部 */
box-shadow: 0px 0px 16px 4px pink inset;
}
<div>雪月剑仙-李寒衣</div>
css3文字阴影和盒子阴影的更多相关文章
- CSS3 --添加阴影（盒子阴影、文本阴影的使用）
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css学习_css文字阴影、盒子阴影
文字阴影和盒子阴影的用法: 多阴影
- css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...
- css3新增（圆角边框(border-radius)，盒子阴影(box-shadow)，文字阴影(text-shadow)，背景缩放(background-size)）
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...
- CSS3文字阴影实现乳白文字效果
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...
- CSS学习笔记-盒子阴影及文字阴影
盒子阴影: 1.格式: box-shadow:h-shadow v-shadow blur spread color insert; box-shadow:水平偏移 ...
- HTML连载70-相片墙、盒子阴影和文字阴影
一. 制作一个相片墙 二. <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS3盒子阴影box-shadow
来自W3CSchool的解释 语法: box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影. ...
随机推荐
- ScreenToGif 录屏转git图片
ScreenToGif 一款开源的屏幕录制,允许您记录屏幕的选定区域.网络摄像头的实时信息或素描板上的实时绘图.之后,您可以编辑动画并将其保存为 gif.apng.视频.psd 或 png 图像. 官 ...
- System.out.printf 格式化输出
System.out.printf @Test public void printTest() throws Exception { String str = "安倍晋三已无生命体征!!&q ...
- Linux CentOS 8 安装DHCP服务
DHCP 如果虚拟机没有 /etc/dhcp/dhcpd.conf 文件,这可能是因为 DHCP 服务器软件包尚未安装,或者安装后配置文件未创建. 要创建 DHCP 服务器配置文件 dhcpd.con ...
- 【django-vue】前后端分离项目
博客目录 pip永久换源 虚拟环境搭建 项目前后端创建 项目目录调整 封装logger 封装全局异常 封装response 数据库配置 用户表继承AbstractUser配置 开放media访问 路飞 ...
- Codeforces Round #618 (Div. 2) A~E
原作者为 RioTian@cnblogs, 本作品采用 CC 4.0 BY 进行许可,转载请注明出处. 1300A. Non-zero 题意:给你一个数组,每次操作你可以使其中任意元素的值+1,问最少 ...
- 一个“不需要”写代码 的 mock & 代理 工具
install yarn create @lowcoding/mock start yarn start mock server 默认在本地 3000 端口启动,访问 http://localhost ...
- 关于 uintptr_t和intptr_t 类型
简介 最近在看代码时,发现了两个之前没见过的数据类型:intptr_t,uintptr_t.这两个数据类型是ISO C99定义的,具体代码在linux平台的/usr/include/stdint.h头 ...
- context 从入门到深入了解
1. 前言 在 Go 语言中,上下文 context.Context 用来设置截止日期,同步信号,传递值的功能,它与 goroutine 关系密切,被用来解决 goroutine 之间 退出通知,元数 ...
- 分享一个简单的使用js格式化json的代码
今天给大家分享一段json格式化代码. 假设json字符串是: {"name":"刘德华","age":25.2,"birthda ...
- spring启动流程 (4) FactoryBean详解
FactoryBean接口 实现类对象将被用作创建Bean实例的工厂,即调用getObject()方法返回的对象才是真正要使用的Bean实例,而不是直接将FactoryBean对象作为暴露的Bean实 ...