CSS3-文本颜色及功能

最新推荐文章于 2022-03-25 17:26:07 发布
最新推荐文章于 2022-03-25 17:26:07 发布
阅读量434 收藏
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S_RuIii/article/details/52015255
版权

一、新增颜色模式

rgba
•r  Red  红  0-255
•g  Green  绿  0-255
•b  Blue  蓝  0-255
•a  Alpha  透明    0-1

Hsl
•H  Hue  色调  任意数值
•S   saturation    饱和度          0%-100%
•L  Lightness  亮度  0%-100%

二、文字阴影

•text-shadow：x y blurcolor, …
•参数
–x  横向偏移
–y  纵向偏移
–blur  模糊距离
–color  阴影颜色
•文本阴影如果加很多层，会很卡很卡很卡

文字阴影应用
•最简单用法
–text-shadow:2px 2px 4px black
•阴影叠加
–text-shadow:2px 2px 0px red, 2px2px 4px green;
–先渲染后面的，再渲染前面的

例：

<!DOCTYPEhtml>

<html>

    <head>

       <metacharset="UTF-8">

       <title></title>

       <styletype="text/css">

           h1{font:100px/200px"微软雅黑";text-align:center;color:#000;

           text-shadow:000rgba(0,0,0,1);border:1pxsolid#000;transition:1s;}

          h1:hover{color:rgba(0,0,0,0);text-shadow:00100pxrgba(0,0,0,0.5);}

       </style>

    </head>

    <body>

       <h1>文字阴影</h1>

    </body>

</html>


三、文字描边

- webkit -text-stroke: 宽度 颜色

例：

<!DOCTYPEhtml>

<html>

    <head>

       <metacharset="UTF-8">

       <title></title>

       <styletype="text/css">

           h1{font:100px/200px"微软雅黑";text-align:center;color:#fff;

           -webkit-text-stroke:3px red;}

       </style>

    </head>

    <body>

       <h1>文字描边</h1>

    </body>

</html>


四、新增文本功能
Direction  定义文字排列方式 ( 全兼容 )
• Rtl 从右向左排列
• Ltr 从右向左排列
• 注意要配合 unicode-bidi 一块使用

Text-overflow 定义省略文本的处理方式
• clip  无省略号
• Ellipsis 省略号 ( 注意配合 overflow:hidden 和 white- space:nowrap 一块使用 )

例：

<!DOCTYPEhtml>

<html>

    <head>

       <meta charset="UTF-8">

       <title></title>

       <style type="text/css">

           p{width:300px; border:1pxsolid#000;font:14px/30px"宋体";

           white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

       </style>

    </head>

    <body>

       <p>雪花，原是天空的心事，当心事很重的时候，天空就会飘起雪。是季节变化的太无常了吧，让我们似乎忘了彼此的牵挂，似乎忘了曾经一起团雪球的</p>

    </body>

</html>





S_RuIii
关注
专栏目录
DSPF28335学习之（3）CCS5.5字体设置、代码颜色设置及快速注释
叶子的一亩二分田
09-13 1万+
目录 1.CCS字体设置 2.CCS代码颜色设置 3.CCS快速注释 准备：CCS5.5 1.CCS字体设置 点击Window→ Preferences                                             General→ Appearance→ Colors and Fronts→ Basic → Text Front→ Edit选中字体Mic...
css3之文本，字体，颜色
努力，追梦的博客
04-10 3385
文本，字体，颜色 1.       新增颜色模式 rgba r            Red        红          0-255 g    Green           绿          0-255 b    Blue              蓝          0-255 a           Alpha            透明             0
css3 颜色 文本
weixin_34246551的博客
04-11 102
　 换行 单行文字溢出三件套： white-space: nowrap; overflow: hidden; white-space: nowrap; 转载于:https://www.cnblogs.com/liuliang389897172/p/8794200.html
css3-增强的文本和颜色功能
王欢的博客
04-15 490
1.css3新增的文本属性text-shadow属性:定义文本阴影或模糊效果 此属性可以接受一个以逗号分隔的阴影效果列表，并应用于该元素的文本 属性的值：（四个参数） 1.表示水平位移，正值偏右，负值偏左 2.表示垂直位移，正值偏下，负值偏上 3.表示模糊半径（可选） 4.表示阴影的颜色（可选），颜色值可以放在前面text-overflow:定义省略文本的处理方式 属性的值：（一个参数） clip：
css实现彩色文本或纹理文本
dixie7674的博客
09-06 309
background-clip: text;目前只有Chrome支持，所以通常使用-webkit-background-clip: text; -webkit-background-clip: text;的含义什么？ 　　以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉 　　简言之：文本区即背景区，文本以外的都被裁剪 具体案例：...
CSS 实现字体发光效果 text-shadow
热门推荐
weixin_38912662的博客
03-25 2万+
一、CSS字体发光效果： CSS3 并没有直接设置发光效果的属性，但是利用text-shadow属性实现此效果 1、text-shadow：该属性为文本添加阴影效果。 text-shadow: h-shadow v-shadow blur color; 2、参数： 参数名称 说明 h-shadow 水平阴影的位置（阴影水平偏移量），可为负值，必需 v-shadow 垂直阴影的位置（阴影垂直偏移量），可为负值，必需 blur 阴影模糊的距离（默认为0），可选 color 阴影颜色（
css字体和背景颜色
weixin_34080951的博客
04-12 2177
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS3-Click-Chart:新CSS功能的示例代码和支持表
05-26
5. **文本处理**：CSS3提供了文本阴影（`text-shadow`）、文本溢出处理（`text-overflow`）、文字装饰（`text-decoration`）等新功能，增强了文本的可读性和美观度。 二、代码示例与实践 1. **选择器应用**：例如...
css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦
09-20
CSS3是层叠样式表的最新版本，它扩展了颜色、字体、布局和动画等方面的功能。在这个实例中，CSS3起到了关键作用，它允许我们用代码精确地描绘哆啦A梦的形象。例如，使用`border-radius`可以创建圆润的边角，模拟哆啦...
CSS3-标签集合.pdf
最新发布
08-11
文本样式中，`color`定义文本颜色，`text-align`控制水平对齐，`text-indent`设置首行缩进，`line-height`调整行间距，`text-decoration`添加下划线、上划线或删除线，`vertical-align`用于元素的垂直对齐，如`...
CSS3文本阴影text-shadow属性详解
09-28
text-shadow属性是CSS3中的一个功能强大的文本样式属性，它允许开发者为文字添加一个或多个阴影效果。阴影可以被设置在文字的水平和垂直方向上，并且可以为阴影指定颜色。text-shadow属性的基本语法如下： ```css ...
css3-ul-ol列表
11-20
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的样式控制功能，尤其是在处理无序列表（`ul`）和有序列表（`ol`）时，可以创造出各种美观、富有创意的列表样式。`ul`列表通常用于展示项目列表，而`ol`...
CSS实现字体荧光效果
The_RedMaple的博客
11-15 5918
CSS中为我们提供了 text-shadow 属性，该属性有4个参数 分别为：水平偏移量，垂直偏移量，阴影范围，阴影颜色 最重要的是，一个字体同时可以拥有多个阴影，只需要用逗号分隔即可（通过不同范围的叠加可以实现不同范围的色彩的浓度，从而实现荧光效果） 如下： text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00a67c, ...
选中文字高亮的css效果
leon
04-20 1万+
 仅用于firefox和chrome浏览器  ie不支持*::-moz-selection {color:#fc5;background-color:#0f581a;}这个网站的css配色不错 http://www.awflasher.com/ 阿瓦的blog
CSS文本样式和CSS3文本效果以及背景
前端攻城狮
07-13 1万+
CSS文本样式 text-indent属性 text-indent属性可以为特定选项的文本进行首行缩进，取值可以是长度值或百分比，它的属性值通常使用em作为单位，text-indent: 2em;表示首行缩进两个字符。另外要注意的是text-indent属性只在块级元素其作用，在行内元素或行内块级元素不起作用，同时它也会被继承。 text-align属性 text-align属性值分别...
CSS3怎么为文字添加背景?
elephant230的博客
05-16 8978
这两天在写官网,标题标语之类的文字都是带有流光溢、炫酷图案的文字 大致就像苹果官网上的那些slogan吧,可不是简单的渐变色之类哦 但是由于使用了CSS3属性,所以要考虑到兼容性,仅Webkit内核的浏览器适用 效果如下: 设计师随后给我发来了一个图案background.jpg: 就拿这张图做背景,即可实现需求, 具体操作如下: <!DOCTYPE html&gt...
CSS笔记（字体样式，文本属性和颜色样式）
banmao8461的博客
07-07 595
1 字体样式 1.1 字体系列（font family） 在CSS中，字体划分为 五组“字体系列”，分别为： sans-serif字体系列：没有衬线的字体，最常用不为过，如 Arial、Verdana，Arial Black，Geneva等 serif 字体系列：有衬线的字体，常用于新闻文字排版，如 Times，Times New Roman，Georgia...
CSS（颜色_字体）
Twilight's Blog
01-24 2951
颜色样式十六进制十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。 所有浏览器都支持十六进制颜色值。RGBRGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值