`

第21章 CSS3文本效果

 
阅读更多

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS3文本效果</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>我是HTML5,超文本标记语言</p>

</body>
</html>

 

style.css

@charset "utf-8";

p {
	/*font-size: 50px;*/
	/*text-shadow: 1px 1px 1px red;*/
	/*text-shadow: -1px -1px 1px red;*/
/*	text-shadow:0px 0px 0 rgb(188,178,188),
				1px 0px 0 rgb(173,163,173),
				2px 0px 0 rgb(157,147,157),
				3px 0px 0 rgb(142,132,142),
				4px 0px 0 rgb(126,116,126),
				5px 0px 0 rgb(111,101,111),
				6px 0px 0 rgb(95,85,95),
				7px 0px 0 rgb(79,69,79),
				8px 0px 7px rgba(0,0,0,0.35),
				8px 0px 1px rgba(0,0,0,0.5),
				0px 0px 7px rgba(0,0,0,0.2);*/

	/*width: 160px;
	background-color: silver;
	white-space: nowrap;
	overflow: hidden;*/
	/*text-overflow: clip;*/
	/*-o-text-overflow: ellipsis;
	text-overflow: ellipsis;*/

	font-size: 80px;
/*	-webkit-text-stroke: 1px red;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: orange;*/
	/*color: orange;*/
	/*-webkit-text-fill-color: orange;*/
	font-family: 黑体;
	background:-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
}

 

 

 

 

3
1
分享到:
评论

相关推荐

    第21章 CSS3文本效果.pdf

    第21章CSS3文本效果专注于几个核心属性,它们分别是文本阴影(text-shadow)、文本裁剪(text-overflow)、文本描边(text-stroke)以及文本填充(text-fill-color)。本章节的学习内容如下: 1. 文本阴影(text-...

    27个精致的CSS3动画效果

    在网页设计领域,CSS3(层叠样式表第三版)是一种强大的样式表语言,用于描述HTML或XML(包括SVG、MathML等各种XML方言)文档的呈现。随着技术的发展,CSS3引入了许多新的特性,其中最引人注目的就是动画效果。本...

    第15章 CSS文本样式[下]

    通过熟练掌握这些CSS文本样式的应用,我们可以创建出极具吸引力且功能丰富的网页文本。在实际项目中,结合HTML结构和响应式设计,这些技术将帮助我们实现更高质量的用户体验。在提供的代码文件中,你可以找到示例...

    40个非常酷的CSS3动画演示

    CSS3动画允许开发者通过纯CSS来创建复杂的动态效果,而无需依赖JavaScript或者其他第三方库。这些动画可以应用于各种元素,如按钮、导航菜单、图像等,为网页增加交互性和视觉吸引力。 **CSS3 动画的关键特性** 1....

    CSS3最全手册

    CSS3引入了`transition`和`animation`,可以实现平滑的动态效果,无需JavaScript干预。 - `transition`:在属性值改变时添加过渡效果。 - `animation`:创建自定义动画序列。 **九、字体图标** `@font-face`规则...

    精通CSS+DIV网页样式与布局(实例)第一章到十二章

    **第二章:CSS盒模型** 这一章详细阐述了CSS盒模型,这是理解CSS布局的关键。盒模型包括内容区域、内边距、边框和外边距,这些组成部分共同决定了元素的总尺寸。了解盒模型有助于精确控制元素的大小和位置。 **第四...

    最新CSS3学习视频教程 33讲完整版 后盾网CSS3视频教程

    ├02 css3文本选择器 表单选择器 子选择器.mp4 ├03 rgba 字体单位 text-shadow box-shadow.mp4 ├04 盒子尺寸 box-sizing 分栏 background-size linear-gradient outline.mp4 ├05 利用media方式实现pc端响应式布局...

    疯狂 html5/css3/js 讲义 6章以后源码 随书光盘附带

    例如,08可能代表第八章的内容,16可能是第十六章,以此类推。每个文件可能包含了相应的HTML、CSS和JavaScript代码示例,覆盖了HTML5的新特性、CSS3的样式规则以及JavaScript的编程实践。通过逐一研究这些文件,读者...

    HTML第五章-工具

    一、文本编辑器 在HTML开发中,选择一个好的文本编辑器至关重要。例如,Visual Studio Code、Sublime Text、Atom等都是流行的代码编辑器,它们支持语法高亮、自动完成、代码折叠等功能,极大提高了编写HTML代码的...

    《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf

    文件内容虽然提供的是前十章的课后答案,但只给出了部分章节的简答题内容,以上知识点是根据这部分内容整理而来。对于其他章节,如CSS和JavaScript相关的知识点没有包含在内,这部分知识需要通过学习其他章节的课后...

    21天精通HTML 5+CSS 3网页设计——源代码

    总之,《21天精通HTML 5+CSS 3网页设计》的源代码集合是一份宝贵的资源,它提供了丰富的实践素材,帮助读者将理论知识转化为实际操作,进一步巩固和提升网页设计能力。通过系统学习和反复实践,你将能在短时间内掌握...

    零基础学HTML CSS源代码

    第21章(源代码\第21章) 示例描述:本章演示内补丁用法。 padding基本语法和用法.html 复合属性padding基本语法和用法。 padding-bottom用法.html 属性padding-bottom用法。 padding-left用法.html ...

    HTML5和CSS3设计模式

    **第10章:文本样式**,介绍了一系列用于美化文本的CSS属性,如字体大小、颜色、行高、字间距等。通过合理设置这些属性,可以使文本更具可读性和吸引力。 #### 十一、内容间距 **第11章:内容间距**,讲解了如何...

    Html+Css+Javascript从入门到精通.pdf

    **第二十一章:使用框架和Cookies** - **框架内使用JavaScript**:实现动态更新框架内容。 - **Cookies管理**:设置、读取和删除Cookies。 **第二十二章:建立日历控件** - **综合应用**:利用JavaScript制作一个...

    《CSS全程指南》随书光盘

    第2章 CSS基础 20 2.1 CSS概述 21 2.1.1 CSS介绍 21 2.1.2 CSS的优点 22 2.2 调用样式表 23 2.2.1 内嵌样式 23 2.2.2 内部样式表 23 2.2.3 外部样式表 25 2.3 CSS的单位 27 2.3.1 长度单位 27 2.3.2 百分比单位 28 ...

    HTML5+CSS3网页模板21-29

    "HTML5+CSS3网页模板21-29"这个压缩包很可能是包含29个不同设计风格的网页模板,每个模板都是基于HTML5和CSS3构建的,用于快速搭建网页结构和样式。 HTML5是超文本标记语言(HyperText Markup Language)的第五次...

    css3.0.chm参考手册下载

    随着互联网技术的发展,CSS已经发展到了第三版,即CSS3。CSS3引入了许多新特性,使得网页设计更加丰富、动态和响应式。本篇将详细介绍CSS3.0参考手册中的关键知识点,并提供相关的学习资源。 一、选择器增强 CSS3...

Global site tag (gtag.js) - Google Analytics