css3-文字与字体
2024-10-07 09:49:45
1. 给文字添加阴影---text-shadow
语法:
text-shadow: X-Offset Y-Offset blur color;
X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;
Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;
Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;
Color:是指阴影的颜色,其可以使用rgba色。
代码示例:
<html>
<head>
<meta charset="utf-8">
<title>text-shadow</title>
<style type="text/css">
.demo {
width: 400px;
padding: 100px;
font: bold 55px/100% "微软雅黑";
background: skyblue;
text-shadow: 3px 3px 0 blue; }
</style>
</head>
<body>
<div class="demo">文字阴影</div>
</body>
</html>
效果:
改变模糊半径:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow</title>
<style type="text/css">
.demo {
width: 400px;
padding: 100px;
font: bold 55px/% "微软雅黑";
background: skyblue;
text-shadow: 3px 3px 20px blue; }
</style>
</head>
<body>
<div class="demo">文字阴影</div>
</body>
</html>
代码效果:
辉光效果示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow</title>
<style type="text/css">
.demo {
background: #;
width: 224px;
padding: 30px;
font: bold 55px/% "Lucida Sans";
color: #fff;
text-transform: uppercase;
text-shadow: 5px #fff,
5px #fff,
10px #fff,
15px #fff,
40px #ff00de,
70px #ff00de;
}
</style>
</head>
<body>
<div class="demo">文字阴影</div>
</body>
</html>
效果:
2.text-overflow : clip | ellipsis
取值:
- clip:
- 不显示省略标记(...),而是简单的裁切。
- ellipsis:
- 当对象内文本溢出时显示省略标记(...)
3.word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。
语法:
word-wrap:nornal(表示控制连续文本换行)
break-word(表示内容将在边界内换行)
normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。
4.嵌入字体@font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中
@font-face的语法规则:
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*; /* url自定义的字体的存放路径*/
[font-weight: <weight>];
[font-style: <style>];
}
YourWebFontName:此值指的就是你自定义的字体名称
source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;
format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;
weight和style:weight定义字体是否为粗体,style主要定义字体样式,如斜体。
最新文章
- WinFrom 公共控件 Listview 的使用
- bzoj1535[POI2005]sza-template
- 安装Pod时提示ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/pod
- ERROR 2002 (HY000): Can&#39;t connect to local MySQL server through socket &#39;/tmp/mysql.sock&#39; (2)
- 利用OpacityMask制作打洞效果
- 【原】在一般处理程序中设置session
- [转载]test后跟je
- OpenJudge/Poj 1083 Moving Tables
- chrmoe debug
- Oracle知识梳理(三)操作篇:SQL基础操作汇总
- Jenkins持续集成01—Jenkins服务搭建和部署
- django 之 stark组件
- 4月27号开学! 第6期《jmeter实战接口自动化+性能》课程,零基础也能学
- FTPService工具类
- vue全局 关键字搜索 v-search
- HTML5实现全屏API【进入和退出全屏】
- 使用MapperScannerConfigurer简化MyBatis配置
- Android知识补充(Android学习笔记)
- Maven项目整合Struts2框架
- Task 6.4 冲刺Two之站立会议9
热门文章
- Java8 新特性之集合操作Stream
- iOS UICollectionView数据少导致不能滚动
- 2018-5 - 凉经 - 乐糖游戏 - PHP 开发实习生
- gitlab webhook jenkins 403问题解决方案
- WCF 出现System.Core version 2.0.5.0 未能加载问题
- 20191128 Spring Boot官方文档学习(9.9)
- 安装mysql5.6-centOs7
- Spring Security Session Time Out
- js if 判断的使用
- 使用 PC 做 FTP/TFTP 服务器,上传和下载文件