阴影text-shadow和box-shadow详解

news/2024/7/7 23:46:09

目录

  • text-shadow
    • 基础知识
    • 多个阴影
    • 进阶
  • box-shadow
    • 基础
    • 单边效果
    • 进阶-外延
    • 进阶-内嵌

text-shadow

基础知识

text-shadow: 水平位移 垂直位移 模糊程度(越大越模糊) 颜色

在这里插入图片描述
所以这个阴影效果可以理解为复制一下内容,并且偏移一下位置。并不是拉伸的那种阴影,当位移距离长的时候,也是有间隙的

多个阴影

多个阴影效果用逗号隔开
在这里插入图片描述

进阶

先看效果,讲解同理下面的 box-shadow进阶-内嵌
在这里插入图片描述

box-shadow

基础

基本的还是和text-shadow一样
在这里插入图片描述

单边效果

在这里插入图片描述

进阶-外延

先看效果
在这里插入图片描述

在这里插入图片描述
这就是并没有偏移,而是在每一边的大小基础上都加上了相同的模糊度

0px 0px 20px 10px black 意思是 不是偏移的阴影效果,而是在每个边上加上长度为10px的阴影效果,阴影程度为20px。阴影长度可以不加,默认就是0px(也有一定的阴影长度如:0px 0px 20px black)

进阶-内嵌

先看效果,此效果在text-shadow应该不行,我尝试了并没有效果
在这里插入图片描述
在这里插入图片描述

5px 20px 10px inset #ccc:相当于 x往里偏移5px,y往里偏移20px,模糊程度10px(不写的话默认0px即实心不模糊),inset就是定义为内嵌(默认不写的话是外延的类型),#ccc为颜色


http://lihuaxi.xjx100.cn/news/173661.html

相关文章

Heterogeneous Parallel Programming 异构并行编程 - UIUC伊利诺伊大学(持续更新)

Lecture 11.2 Introduction to Heterogeneous异构1.3 Portability and Scalability1.4 Introduction to CUDA 数据并行化 and 执行模型1.5 Introduction to CUDA 内存模型 and 基本函数API1.6 Introduction to CUDA Kernel-based SPMDHeterogeneous Programming是采用不同类型的…

Docker基本原理

Docker基本原理Docker基本原理一、Docker概述1.1 IT架构的演进:1.2 Docker是什么Docker的Logo:Docker的设计宗旨:1.3 容器的特点1.4 Docker容器与虚拟机的区别1.5 容器在内核中支持2种重要技术1.6 Docker核心概念二、安装Docker2.1 Yum安装Do…

Spider爬虫入门(发送Get Post请求、携带请求头、Cookie、Session、响应Response、获取二进制数据 、解析Json数据)

文章标题一、爬虫介绍二、Requests模块发送Get请求三、Get请求携带参数四、携带请求头五、携带Cookie六、发送Post请求七、响应Response八、获取二进制数据九、解析Json数据一、爬虫介绍 爬虫:Spider 网络蜘蛛 爬虫也叫网页蜘蛛,网络机器人,就是模拟客户…

Mysql8.x版本主从加读写分离(一) mysql8.x读写分离

Mysql8.x版本主从加读写分离(一) mysql8.x主从_争取不加班!的博客-CSDN博客 Mycata需要使用jdk 单独一台服务器部署的mycat 192.168.11.143 手动上传jdk的包 tar zxvf jdk-8u121-linux-x64.tar.gz -C /usr/local/ 解压 cd /usr/local…

CAS号:2578-57-6,H2N-PG-OH

脯氨酸酶的底物(脯氨酸二肽酶)。 编号: 116803中文名称: 二肽Pro-Gly英文名: Pro-GlyCAS号: 2578-57-6单字母: H2N-PG-OH三字母: H2N-Pro-Gly-COOH氨基酸个数: 2分子式: C7H12N2O3平均分子量: 172.18精确分子量: 172.08等电点(PI): 6.11pH7.0时的净电荷数: -0.02平均亲水性: -疏…

【算法笔记(五)】排序算法

算法笔记(五) 排序算法算法笔记(五)前言一、冒泡排序1.什么是冒泡排序2.实际需求3.代码实现二、选择排序1.什么是选择排序2.需求规则三.插入排序1.了解插入排序2.需求规则3.代码实现四.希尔排序1.什么是希尔排序2.需求规则3.代码实现五.快速排序1.什么是快速排序2.需求规则3.代…

Hystrix 请求合并、请求隔离、优化

文章目录请求合并引入依赖启动类 加注解EnableHystrixservice服务测试请求隔离线程池隔离&#xff08;大部分情况下&#xff09;信号量隔离线程池隔离演示引入依赖启动类 加注解EnableHystrixservice服务测试信号量隔离演示Hystrix的其他用法请求合并 引入依赖 <dependenc…

一种无需调查船上坞的调查设备安装测量方法和安装测量系统

本文来自于博主发明专利的技术交底。 大型科考船船底安装大型的精密测量设备&#xff0c;对安装的测量精度要求比较高&#xff0c;通过上坞&#xff0c;采用传统的测量方式&#xff0c;先做控制网&#xff0c;然后进行碎步测量&#xff0c;得到测量设备及其室内附属设备与船舶的…