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 向框添加一个或多个阴影. ...
随机推荐
- 【“互联网+”大赛华为云赛道】IoT命题攻略：仅需四步，轻松实现场景智能化设计
摘要:仅需四步,轻松实现场景智能化设计,作品开发超轻松. 本文分享自华为云社区<["互联网+"大赛华为云赛道]IoT命题攻略:仅需四步,轻松实现场景智能化设计>,作者: ...
- 当物联网遇上云原生：K8s向边缘计算渗透中
摘要:K8s正在向边缘计算渗透,它为边缘侧的应用部署提供了便利性,在一定程度上转变了边缘应用与硬件之间的关系,将两者的耦合度降低. 本文分享自华为云社区<云原生在物联网中的应用[拜托了,物联网! ...
- 什么是 A/B 实验，为什么要开 A/B 实验？
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 1.什么是 A/B 实验 A/B 实验也被称为 A/B 测试,实验的基本思路是在线上流量中取出一小部分(较低风险) ...
- Solon Web 开发：一、开始
1.第一个Web应用 回顾一下<快速入门>里做过的事情,然后开始我们的第一个web应用 1.1.pom.xml配置 设置solon的parent.这不是必须的,但包含了大量默认的配置,可简 ...
- PPT 如何做出高大上的表格
字不如表.表不如图 如何做 https://www.bilibili.com/video/BV1ha411g7f5?p=17
- mybatis使用oracle进行添加数据的心得
本次博主主要进行oralce数据库开发,好久不用oracle,有很多知识点也忘的差不多了,本次主要是复习一下工作中主要使用的一些sql语句编写: 查询 查询语句都是正常的,但是需要注意的是oracle ...
- SpringBoot 项目实战 | 瑞吉外卖 Day05
该系列将记录一份完整的实战项目的完成过程,该篇属于第五天 案例来自B站黑马程序员Java项目实战<瑞吉外卖>,请结合课程资料阅读以下内容 该篇我们将完成以下内容: 新增套餐 套餐信息分页查 ...
- 五分钟，手撸一个简单的Spring容器
工厂和Spring容器Spring是一个成熟的框架,为了满足扩展性.实现各种功能,所以它的实现如同枝节交错的大树一样,现在让我们把视线从Spring本身移开,来看看一个萌芽版的Spring容器怎么实现 ...
- svg组件封装
svg图标优点 文件体积小,能够被大量的压缩 图片可无限放大而不失真(矢量图的基本特征) 在视网膜显示屏上效果极佳 能够实现互动和滤镜效果 svg图标使用 1.安装相应的npm包: yarn add ...
- jedis 与 redission 实现分布式锁
本文为博主原创,未经允许不得转载: 目录: 1. Jedis 实现分布式锁 2. Redission 实现分布式锁 为了确保分布式锁可用,至少要保证锁的实现同时满足以下几个条件 互斥性:在任意时刻只有 ...