首页 > 其他分享 >CSS3学习笔记-文字特效

CSS3学习笔记-文字特效

时间:2023-11-12 10:22:05浏览次数:30  
标签:CSS3 描边 clip text 笔记 文字特效 background shadow 文本

CSS3中提供了许多有趣和实用的文字特效,可以让我们的文本内容更加生动有趣,下面介绍一些常用的文字特效。

  1. 文本阴影 使用text-shadow属性可以为文本添加阴影效果,语法如下:
text-shadow: h-shadow v-shadow blur-color;

其中,h-shadow和v-shadow是必需的参数,分别表示阴影的水平和垂直偏移量;blur-color是可选的参数,表示阴影的模糊程度和颜色。 例如,我们可以为标题添加一个黑色的阴影:

h1 {
    text-shadow: 2px 2px black;
}
  1. 文本渐变 使用background-clip和-webkit-background-clip属性可以为文本添加渐变效果,语法如下:
background-image: linear-gradient(color1, color2);
-webkit-background-clip: text;
background-clip: text;

其中,color1和color2是渐变的起始颜色和结束颜色,-webkit-background-clip和background-clip用于指定渐变的限制区域。 例如, 我们可以为段落中的某些文字添加渐变效果:

p {
    font-size: 24px;
    background-image: linear-gradient(red, blue);
    -webkit-background-clip: text;
    background-clip: text;
}
  1. 文本描边 使用text-stroke属性可以为文本添加描边效果,语法如下:
text-stroke: width color;

其中,width是描边的宽度,color是描边的颜色。 例如,我们可以为链接文本添加一个蓝色的描边:

a {
    text-stroke: 1px blue;
}

以上是CSS3中一些常用的文字特效,可以根据实际需求进行选择和组合使用,实现不同的文本效果。

标签:CSS3,描边,clip,text,笔记,文字特效,background,shadow,文本
From: https://www.cnblogs.com/wuqiyang/p/17826810.html

相关文章

  • 读程序员的制胜技笔记10_可口的扩展
    1. 可扩展性1.1. 土耳其的一句谚语:“路到眼前必有车”1.1.1. “别为还没到来的事情烦恼”1.2. 单纯的高性能并不能使一个系统具有可扩展性,你需要让所有方面的设计都得能够迎合越来越多的用户1.3. 没有一个单一的方案可以解决我们所有的问题,我们需要把所有用来解决问题的......
  • 歌谣v2+ele笔记记录JsonServer模拟数据2
    第一步初始化配置npminit-y第二步yarnaddjson-server第三步创建db.json文件{"account":{"user":[{"name":"geyao","password":"123456"}]}}启动json-server--watch.......
  • 【深度学习笔记】第3章-神经网络基础
    参考书籍:邓立国等《python深度学习原理、算法与案例》清华大学出版社3.3感知机3.3.1感知机模型感知机,又称阈值逻辑单元(ThresholdLogicUnit,TLU)/线性阈值单元(LinearThresholdUnit,LTU)经典数据集:IrisDataSet(鸢尾属植物数据集)但是这个数据集有些复杂,没什么必要用,自己写......
  • 《Swin Transformer: Hierarchical Vision Transformer using Shifted Windows》阅读
    论文标题《SwinTransformer:HierarchicalVisionTransformerusingShiftedWindows》Swin这个词貌似来自后面的ShiftedWindowsShiftedWindows:移动窗口Hierarchical:分层作者微软亚洲研究院出品初读摘要提出SwinTransformer可以作为CV的通用主干Tansfo......
  • 学习笔记9
    第6章信号和信号处理1.信号和中断1.信号:信号是操作系统中用于通知进程有突发事件发生的一种机制。信号可以由硬件或软件生成,用于中断进程的执行。信号的主要目的是让进程能够及时处理这些特殊事件,例如用户输入、硬件故障等。信号的特点:异步性:信号可以在进程执行的任何时......
  • Pollard-Rho 学习笔记
    前言其实很早就看到过了,下定决心去学的,居然是因为翻到之前口胡的题目,然后发现之前做法假了,继续尝试做的时候发现需要这个算法,于是,题目就绿->黑了。Step.1引入求一个数的所有因数,这个问题伴随了我们很久了,现在又要翻出来鞭尸。最开始的时候,我们使用的是最朴素的\(O(n)\)试除......
  • 黑马pink css3
    行内元素/内联元素:是最典型的行内元素特点:相邻行内元素在一行上,一行可以显示多个高,宽度设置是无效的默认宽度是他本身内容的宽度行内元素只能容纳文本或其他行内元素注意:内部不能嵌套‘’可以嵌套块级元素行内块元素:‘’特点:一行可以有多个,之间有空隙默认宽度是他本......
  • SuperGlue: Learning Feature Matching with Graph Neural Networks论文笔记
    SuperGlue:LearningFeatureMatchingwithGraphNeuralNetworks源码:github.com/magicleap/SuperGluePretrainedNetwork背景:主要解决图像中点之间的对应关系。主要方法:上图为该方法的主要框架。模型大致分为两个部分:注意图神经网络和最优匹配层。其中第i个局部特征由di......
  • 第九周学习笔记
    @[TOC](第九周学习笔记)#1.信号的初步认识##1.1信号的特点信号所携带的信息量少,操作简单##1.2信号的状态1.产生①由键盘产生:例如Ctrl+c,Ctrl+②命令:kill③系统函数:kil④软条件:定时器⑤硬件:段错误,除0错误>由键盘和和硬件产生的信号统称为硬件方式,其余的为软件方式2.未......
  • openGauss学习笔记-120 openGauss 数据库管理-设置密态等值查询-概述及使用gsql操作密
    openGauss学习笔记-120openGauss数据库管理-设置密态等值查询-概述及使用gsql操作密态数据库120.1密态等值查询概述随着企业数据上云,数据的安全隐私保护面临越来越严重的挑战。密态数据库将解决数据整个生命周期中的隐私保护问题,涵盖网络传输、数据存储以及数据运行态;更进一步......