9.28【前端开发】文本属性:如何使用文本阴影等样式?
时间:2022-07-26
本文章向大家介绍9.28【前端开发】文本属性:如何使用文本阴影等样式?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
文本属性:如何使用文本阴影等样式?
文本对齐与缩进
p {
font-size: 12px;
text-align: left;
line-height: 28px;
text-indent: 2em;
}
为什么用2em,如果相当于两个字宽。
text-decoration属性
<style>
.div1 a:nth-of-type(1){ text-decoration: underline; }
.div1 a:nth-of-type(2){ text-decoration: overline; }
.div1 a:nth-of-type(3){ text-decoration: line-through; }
.div1 a:nth-of-type(4){ text-decoration: none; }
</style>
<div class="div1">
<a href="#">下划线:underline</a> <br/> <br/>
<a href="#">上划线:overline</a> <br/> <br/>
<a href="#">删除线:line-through</a> <br/> <br/>
<a href="#">无下划线:none</a> <br/> <br/>
</div>
文本阴影text-shadow
语法:
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
有好几种语法,这种最好记一点。
<h1>文本阴影效果</h1>
<style type="text/css">
h2.h21 {
text-shadow: darkblue 2px 2px 2px ;
}
h2.h22::first-letter {
text-shadow: darkblue 2px 2px 2px, yellow 4px 4px 3px;
}
h2.h23::first-line {
text-shadow:red 2px 2px 2px, yellow 4px 4px 3px;
}
</style>
<h2 class="h21">文本</h2>
<h2 class="h23">念和业务经营模式得到了社会的广泛<br>念和业务经营模式得到了社会的广泛</h2>
阴影效果在浏览器里是全支持的,可以放心使用。first-line这个伪元素,指的是一行所在的文本,并非一个p或h*标签里面的全部文本。
练习:使用阴影实现首字母索引效果
原效果:
及代码:
<p><span>A</span> A Fine Frenzy Air Supply Akon Alan Silvestri Apink 安又琪 安在旭 安室奈美惠 </p>
使用text-shadow改写,实现同样的效果
h2::first-letter {
text-shadow: red -30px 0 0;
margin-left: 50px;
}
最佳实践
text-shadow: #fc0 1px 0 10px;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
只需要记住这两种语法就可以了。
- [快学Python3]类基础
- 邻接矩阵存储有向图(详解)
- [快学Python3]二分查找[策略优化版本]
- 使用 zipfile 解压含有中文文件名的 zip 文件
- qsc oj 22 哗啦啦村的刁难(3)(随机数,神题)
- [快学Python3]数据结构与算法-二分查找
- [快学Python3]数据结构-队列
- 51Nod 1090 3个数和为0(暴力)
- qscoj 128 喵哈哈村的魔法源泉(2)(模仿快速幂,好题)
- POJ 3624 Charm Bracelet(01背包裸题)
- 2015 计蒜之道 初赛(4)爱奇艺的自制节目(枚举 贪心)
- Codeforces 810C Do you want a date?(数学,前缀和)
- [快学Python3]数据结构-堆栈
- [快学Python3]PyMySQL库
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 《一起学sentinel》六、Slot的子类及实现之FlowSlot和DegradeSlot
- Hive UDF/UDAF 总结
- 3分钟短文:用Laravel发一封“漂洋过海”的电子邮件
- leetcode之单词替换
- KMP算法分析
- Spring Boot 系列:最新版优雅停机详解
- 前端学数据结构与算法(八): 单词前缀匹配神器-Trie树的实现及其应用
- 突击并发编程JUC系列-Locksupport 与 Condition
- 01.视频播放器框架介绍
- C#扫描器编写各种问题荟萃
- JavaScript中的浅拷贝与深拷贝
- 自己实现一个VUE响应式--VUE响应式原理
- 各种CSS居中方案
- JavaScript的内存管理
- 实现自己的Vue Router -- Vue Router原理解析