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 向框添加一个或多个阴影. ...
随机推荐
- SBOM落地的关键一步——漏洞可利用性交流（VEX）
SolarWinds 网络安全事件的影响,加上 Log4j 漏洞对众多知名企业产生难以估量的后果,使软件供应链安全成为安全领域的热门话题,并且SBOM现在成为网络安全漏洞计划的一个重要组成部分. SB ...
- 漏洞评分高达9.8分！Text4Shell 会是下一个 Log4Shell吗？
在过去的几天里,Apache Commons Text 库中一个名为 Text4Shell 的新漏洞引起很大的轰动,该漏洞存在于 Apache Commons Text 1.5到1.9版本中.此警报于 ...
- 2023 年汽车行业向好发展，火山引擎 VeDI 助力车企数智转型
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 2023 年的汽车市场,预计能有一个向好的转型. 据中汽协公布的 2022 年 1-11 月累计汽车销量数据,达到 243 ...
- SpringBoot Docker 发布到 阿里仓库
1. 创建仓库 管理里面,可以查看详细的信息 设置登录密码 2. 接下来,将本地镜像推到阿里 : SpringBoot Docker 发布 docker commit 这部分可以不操作 docker ...
- Spring Boot 接口返回文件流
import org.springframework.core.io.FileSystemResource; import org.springframework.core.io.Resource; ...
- 获取标准报表CJI3的ALV数据
1.CJI3 运行标准程序CJI3,获取对象和业务货币值,在其他程序中展示 2.代码展示 CJI3对应程序名rkpep003,最终展示的ALV结构可以再程序中找到. 因为本实例只获取其中两个字段的值, ...
- VL02N、VL09交货单相关增强
一.业务需求 当前台操作过账发货或冲销时,需要将数据实时同步到第三方系统,因此需要开发增强 在用户出口MV50AFZ1->userexit_save_document中加入接口逻辑即可 定期更文 ...
- 深挖 Python 元组 pt.2
哈喽大家好,我是咸鱼 在<深挖 Python 元组 pt.1>中我们了解 Python 元组的一些概念(索引和切片等),以及如何创建元组,最重要的是我们还介绍了元组的不可变特性 那么今天我 ...
- 深度 | 新兴软件研发范式崛起，云计算全面走向 Serverless 化
11月3日,2022 杭州 · 云栖大会上,阿里云智能总裁张建锋表示,以云为核心的新型计算体系正在形成,软件研发范式正在发生新的变革,Serverless 是其中最重要的趋势之一,阿里云将坚定推进核心 ...
- 什么是 Serverless 架构？
随着时间的推移,Serverless 架构变得越来越火热,凭借着极致弹性.按量付费.低成本运维等特性,在很多领域发挥着越来越重要的作用:机器学习领域在近些年也非常火热,并在越来越多的行业中得到应用. ...