css3--text属性

最新推荐文章于 2023-01-18 16:28:30 发布
最新推荐文章于 2023-01-18 16:28:30 发布
阅读量399 收藏
点赞数
分类专栏： javascript css3 文章标签： javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qw765811529/article/details/48519931
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03</title>
		
		<style>
			/*1*/
			.one{
				width: 50px;
				border: 1px solid rosybrown;
				background-color: #F0FFFF;				
			}
			
			/*2*/
			.two{
				width: 50px;
				border: 1px solid rosybrown;
				background-color: #F0FFFF;	
				white-space: nowrap;/*设置或检索对象内空格的处理方式*/
				text-overflow: clip;/*属性规定当文本溢出包含元素时发生的事情  clip、ellipsis、string*/
				/*
				 text-overflow: ellipsis;
				 text-overflow: "替换的内容";
				 */
				overflow: hidden;
			}
			.two:hover{
			  	overflow:visible;/*鼠标在其上时，显示全部内容*/
			}
			
			
			/*3*/
			.three{
				width: 300px;
				border: 1px solid rosybrown;
				background-color: #F0FFFF;	
				
				color: red;	
				font-size:40px ;
				/*webkit内核*/
				-webkit-text-fill-color: blue;/*设置或检索对象中的文字填充颜色*/	
				/*
				 -webkit-text-stroke:1px red;复合属性。设置或检索对象中的文字的描边
				 */	
				 -webkit-text-stroke-width: 1px;/*设置或检索对象中的文字的描边厚度*/
				 -webkit-text-stroke-color: aquamarine;/*设置或检索对象中的文字的描边颜色*/
			}
			
			/*4*/
			.four{
				width: 150px;
				border: 1px solid rosybrown;
				background-color: #F0FFFF;	
				font-size: 20px;
				text-shadow: 2px 2px 5px #BC8F8F;/*设置或检索对象中文本的文字是否有阴影及模糊效果*/
			}
			
			/*5*/
			.five{
				width: 400px;
				border: 1px solid #BC8F8F;
				background-color: #7FFFD4;
				cursor: pointer;
				font-size: 20px;
			}
			.five:hover{
				text-shadow: 2px 2px 5px #BC8F8F;/*设置或检索对象中文本的文字是否有阴影及模糊效果*/
			}
		</style>
		
		<script>
			window.οnlοad=function(){
				var div = document.getElementsByTagName("div")[4];
				var num = 0;
				var t;
				div.onmouseover = function(){
					clearInterval(t);
					t=setInterval(function(){
					if(num==50){
						clearInterval(t);
					}
					else{
						num++;
						div.style.textShadow=num + "px " + num +"px " +"5px #BC8F8F";
					}
				},60);
				};
				
				div.onmouseout = function(){
					clearInterval(t);
					t=setInterval(function(){
						if(num<=0){
							clearInterval(t);
						}
						else{
							num--;
							div.style.textShadow=num + "px " + num +"px " +"5px #BC8F8F";
						}
					},60);
				};
				
			}
			
		</script>
	</head>
	
	<body>
		<div class="one">这是一个测试！</div>
		<br />
		<div class="two">这是一个测试！</div>
		<br />
		<div class="three">这是一个测试！</div>
		<br />
		<div class="four">这是一个测试！</div>
		<br />
		<div class="five">这是一个测试！</div>
	</body>
</html>


效果图


您宁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css text-stroke 文字描边
352328759的博客
12-22 3246
text-stroke 不是标准的 css 属性, 所以本篇读者可以视为娱乐 text-stroke 是复合属性, 包括 text-stroke-width, text-stroke-color 因为不是标准属性, 大多数情况要加上前缀 text-stroke-width 指描边的宽度, 该属性的描边风格是居住描边(内边, 外边各占一半), 且只有居中描边一种 结合 absolute 定位, 用未描边的内容, 遮盖已描边的内容, 可以实现只描外边的效果 demo <!DOCTYPE html>
CSS——文本属性
笙
04-01 422
文本属性 一、定义 ​ CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。 二、文本颜色 1、属性 ​ color属性用于定义文本的颜色 2、语法： /* 三种方式: */ p { color: green; color: rgb(255, 174, 0); color: #fffb00; } 2、表示方法 1>...
CSS 高级属性之 text-shadow 详解
青颜的天空的博客
03-08 4633
https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow
CSS 文本缩进text-indent属性
m0_49515138的博客
01-18 2395
解决办法：将行内元素变为块级元素：display:block;或inline-block;1、定义：text-indent 属性规定文本块中首行文本的缩进。3-1、允许使用负值。如果使用负值，那么首行会被缩进到左边。原因:text-indent无法作用于行内元素。
CSS text-属性汇总
pcaxb的专栏
12-14 4875
  1.text-shadow 属性 text-shadow: 5px 5px 5px #FF0000;     2.text-overflow 属性 (string) text-overflow:ellipsis;   string：用自定义字符串来代表被修剪的文本（目前只在Firefox 浏览器下有效,style="text-overflow:'****';"） ...
CSS text-shadow属性
09-27
总之，`text-shadow`是CSS3中一个非常实用且富有创意的属性，它为网页设计提供了新的可能性，让设计师能够更加灵活地控制文字的视觉效果。尽管在某些老旧浏览器中可能存在兼容性问题，但随着浏览器的不断升级，`text...
CSS3文本阴影text-shadow属性详解
09-28
下面小编就为大家带来一篇关于CSS3文本阴影text-shadow属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
CSS属性text-overflow的使用问题
09-24
在CSS中，`text-overflow`属性是一个非常实用的工具，用于处理文本溢出的情况，尤其是在有限的容器空间内展示内容时。它主要用于定义当文本溢出其包含块时应如何处理。`text-overflow`属性可以有`clip`和`ellipsis`...
jquery-Velocity.js
qw765811529的专栏
10-26 3038
官方文档 1、简介 动画效果 2、
JavaScript--window.frames在ie与其他浏览器的不用获取。
qw765811529的专栏
05-26 1375
一、window对象【补充知识----来自W3School】 Window 对象表示浏览器中打开的窗口。 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。 注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。 Windo
javascript--QUnit【javascript单元测试框架】
qw765811529的专栏
08-26 1022
QUnit官网 开源中国：http://www.oschina.net/p/qunit 参考：http://www.zhangxinxu.com/wordpress/2013/04/qunit-javascript-unit-test-单元测试/     http://blog.csdn.net/cyq1984/article/details/6398596 一、断言（As
css3--transform属性
qw765811529的专栏
09-18 892
1、基本 06 .total{ width: 200px; height: 200px; border: 2px solid #8FA1FF; margin: 50% 50%; } .one{ width: 200px; height: 200px; border: 3px solid #ADFF2
css3--简单制作时钟
qw765811529的专栏
09-21 757
css3闹钟 .clock{ width: 400px; height: 400px; border: 2px solid #BC8F8F; border-radius: 50%; box-shadow: 1px 1px 1px #8FA1FF; background: -webkit-gradient(radial,120 120
css3--background属性
qw765811529的专栏
09-16 540
/*1*/ .one{ width: 300px; height: 300px; border: 1px solid blue; background-color: azure; background-image: url(../img/beautiful01.png); background-repeat: no-repeat; background
css3--border属性
qw765811529的专栏
09-16 480
aa
JavaScript--使用form提交
qw765811529的专栏
05-07 398
一直以来都是使用jquery，jquery方便快捷，但是今天重温了一下JavaScript发现很多都忘了。 今天记录下来，温故而知新。 没有使用jquery，只是用JavaScript编写 功能：1、from提交，确认；     2、跳转页面，获取url参数 1、提交页面 <% String path = request.getContextPath();
JavaScript事件循环Event Loop
qw765811529的专栏
08-21 235
JavaScript是一门单线程的非阻塞的脚本语言。 单线程 同一时间内只能做一件事，javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务。 非阻塞 当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。   ...
JavaScript执行上下文
qw765811529的专栏
08-21 227
  代码分析 function fn(a){ console.log(a); //function(){} var a = 2; function a(){}; console.log(a); //2 } fn(1);   1、初始化函数fn执行上下文； 2、建立阶段： 参数a赋值1，b为undefined；函数声明a；变量a赋值为2； 确定作...
css background-text
最新发布
03-16
CSS的background属性用于设置元素的背景样式，其中background-text是background属性的一个子属性，用于指定背景文本的样式。 background-text属性有以下几个可能的取值： 1. clip：默认值，表示背景文本不可见，被裁剪掉。 2. color：表示背景文本以颜色形式显示。 3. fill：表示背景文本以填充形式显示。 4. stroke：表示背景文本以描边形式显示。 使用background-text属性可以为元素的背景添加文本效果，例如在背景上显示一些文字或图案。具体的使用方式可以通过以下代码示例来说明： ```css .element { background-image: url('background-image.jpg'); background-color: #f1f1f1; background-text: fill; color: #000; font-size: 24px; text-align: center; } ``` 上述代码中，`.element`是一个具有背景样式的元素选择器，通过`background-image`属性设置了背景图片，`background-color`属性设置了背景颜色。然后使用`background-text`属性将背景文本以填充形式显示，并通过`color`属性设置了文本的颜色。最后，通过`font-size`和`text-align`属性设置了文本的字体大小和对齐方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值