css3-文字与字体
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主要定义字体样式,如斜体。
css3-文字与字体的更多相关文章
- 3.css3文字与字体
1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...
- css3文字与字体样式
css3使用服务器端字体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS3 文字与字体相关样式
给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...
- css3文字与字体的相关样式
给文字添加阴影——text-shadow属性 text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length c ...
- css3文字与字体
---恢复内容开始--- 1.text-overflow(用来设置是否使用省略标记)必须和white-space:nowrap 同时使用white-space:nowrap(强制文本在一行显示) wo ...
- CSS3文字与字体 text-overflow 与 word-wrap
text-overflow 对象内的文本溢出部分采用省略“...”标记 或者 剪切: text-overflow:elip(超出容器边界的内容剪切掉) | ellipsis(超出容器边界内容省略标示 ...
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...
- CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...
- html5--6-16 CSS3中的文字与字体
html5--6-16 CSS3中的文字与字体 中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体 ...
- html5--6-23 CSS3中的文字与字体
html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...
随机推荐
- JVM参数配置详解-包含JDK1.8
堆大小设置 JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:6 ...
- 三、Appium-python-UI自动化之元素定位uiautomatorviewer
uiautomatorviewer是android-sdk自带的一个元素定位工具,非常简单好用,使用uiautomatorviewer,可以检查一个应用的UI来查看应用的布局和组件以及相关的属性. 一 ...
- Linux监控命令之==>sar
一.使用说明 sar 是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告,包括:文件的读写情况.系统调用的使用情况.磁盘I/O.CPU效率.内存使用状况.进程活动及 ...
- Java与C#不同
1.C#方法定义可以有默认参数,而Java则不支持该方式. C#方法定义 public void ShowMessage(string text,string orderId="" ...
- 【R】数据结构
之前一阵子,在EDX上学习了R语言的一门基础课程,这里做个总结.这门课程主要侧重于R的数据结构的介绍,当然也介绍了它的基本的绘图手段. 工作空间相关 ls() ## character(0) rm(a ...
- 问题记录 | deepin15.10重装nvidia驱动及cuda
问题描述: nvidia-smi也有显示,显卡驱动是在的,而且nvcc显示出来的cuda版本9.0也没错,不是9.1.不知道问题所在,索性重装全部. sudo tee /proc/acpi/bbswi ...
- Xpath素材
from lxml import etree text = """ <div> <ul> <li class="item-0&qu ...
- editText内容从hint右输入
如何让editText内容从hint右输入呢: <EditText android:id="@+id/et_password" android:textColor=" ...
- 所遇Oracle错误代码
ORA-00905: 缺失关键字 少了空格或关键字写错 ORA-00922: 选项缺失或无效 错误原因:一般是语句的语法有问题.比如命名不对,关键字写错等等.对于非标准的命名,一般采用双引号来创建 ...
- 第五周学习总结&第三次实验报告(String类的应用)
第五周学习总结 1.学习了继承的相关知识点: (1) 继承的格式为class 子类 extends 父类{} (2) 继承实际上是通过子类去扩展父类的功能 (3) 一个子类只能继承一个父类,也就是说, ...