rgba:a是设透明度值

应用:background:rgb(255,255,255,0.5)

color:rgb(255,255,255,0.5)

border:1px solid rgb(255,255,255,0.5)

text-shadow:文字阴影

text-shadow:左右偏移量 上下偏移量 模糊的程度 阴影颜色

还可以阴影叠加,如text-shadow:-5px -10px 1px red,5px 10px 2px green;

文字描边

-webkit-text-stroke:3px red;

-o-text-text-stroke:3px red;

-moz-text-stroke:3px red;

text-stroke:3px red;

文字效果

文字阴影

h1{text-align:center;color:pink;font-size:100px;font-weight:bold; text-shadow:2px 2px 0px white,4px 4px 0px pink;}

文字效果

文字排版(全兼容)

要跟unicode-bidi配合使用unicode-bidi:bidi-override;

<style>
p{width:300px; border:1px solid #000;font:14px/30px "宋体"; direction:rtl; unicode-bidi:bidi-override;}
</style>
</head> <body>
<p>文本新增属性哎呦啦</p>
</body>

文字效果

超出显示省略号

<style>
p{width:300px; border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}<!-- white-space:nowrap超出不换行,text-overflow:ellipsis文字超出后显示省略号,无省略号clip-->
</style>
</head> <body>
<p>博客园是个好地方博客园是个好地方博客园是个好地方博客园是个好地方</p>
</body>

效果如图:

css3-文本新增属性的更多相关文章

  1. CSS3 文本常用属性

    CSS 常用属性 text-shadow属性文字阴影:第一个值背景相对原本文字居左的距离,第二个值据当前文本上方的距离,第三个值清晰度(越小越清晰),第四个值颜色 word-wrap:自动换行,如果是 ...

  2. 【CSS3】 新增属性

    一. box-shadow(阴影效果) 使用: box-shadow: 20px 10px 0 #000; -moz-box-shadow: 20px 10px 0 #000; -webkit-box ...

  3. CSS3背景相关新增属性

    background-clip border-box:充满边框和内边距,内容. padding-box:充满内边距,内容 content-box:只充满内容 background-origin bor ...

  4. CSS3文本温故

    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...

  5. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

  6. CSS3:CSS3 文本效果

    ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...

  7. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  8. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  9. 4.css3文本属性

    1.css3文本属性: ①Color:颜色. ②Text-align:文本水平对齐方式. ⑴Left默认值,right,center,justify两端对齐: ⑵新增start相当于left,end相 ...

随机推荐

  1. css里颜色的那些事儿(合法颜色值)

    css中主要有六种方法指定颜色: 1.十六进制颜色 2.RGB颜色 3.RGBA颜色 4.HSL色彩 5.HSLA颜色 6.预定义/跨浏览器的颜色名称 前三种是我们最常见的,也是用的最多的,而后三种对 ...

  2. 2018.4.26 Mac安装Redis5.0.3版本服务器

    Mac安装Redis服务器 安装 1.到官网下载 选择稳定版本 打开官网:https://redis.io/ 2.下载完成后,打开命令行工具,执行解压命令 tar zxvf redis-5.0.3.t ...

  3. web.py利用模板的详细步骤

    <python网络编程学习笔记(10):webpy框架>(http://www.cnblogs.com/xiaowuyi/archive/2012/11/15/2771099.html#3 ...

  4. Oracle 批量修改某个用户下表的表空间

    说明:一般来说要修改表的表空间需要同时修改表的表空间和其对应的索引表空间,并且在修改含有BOLB字段的表的表空间时又不一样,具体请参考末尾的链接 思路:拼凑一个满足条件的批处理查询语句,将查询的结果复 ...

  5. ASP.NET Core的Kestrel服务器(转载)

    Kestrel是一个基于libuv的跨平台ASP.NET Core web服务器,libuv是一个跨平台的异步I/O库.ASP.NET Core模板项目使用Kestrel作为默认的web服务器.Kes ...

  6. C++STL之Vector的应用

    这是我第一次写博客,请多指教! vector是一种向量容器,说白了就是可以改变大小的数组. vector是一个模板类,如果直接这样会报错: vector a; //报错,因为要指定模板. 需要像这样: ...

  7. 2017-2018-2 20155203《网络对抗技术》 Exp7:网络欺诈防范

    1.基础问题回答 (1)通常在什么场景下容易受到DNS spoof攻击 连接无线网络,和恶意攻击者处在同一局域网下. (2)在日常生活工作中如何防范以上两攻击方法 首先决不去点击浏览器都认为不安全的网 ...

  8. 20155223 Exp7 网络欺诈防范

    20155223 Exp7 网络欺诈防范 基础问题回答 通常在什么场景下容易受到DNS spoof攻击? 无设防或防护力特别弟弟低的公共局域网,或者是在同一个局域网下. 在日常生活工作中如何防范以上两 ...

  9. 20155238 2016-2017-2《Java程序设计》课程总结

    每周作业链接汇总(按顺序) 预备作业1 预备作业2 预备作业3 第一周作业 第二周作业 第三周作业 第四周作业 第五周作业 第六周作业 第七周作业 第八周作业 第九周作业 第十周作业 自认为写得最好一 ...

  10. 利用OVS+FLOODLIGHT,为数据表添加VLAN_ID和MPLS

    话不多说,直接上拓扑: 我这里是用主机h1 (10.0.0.1)ping 主机h2(10.0.0.2) 1.添加VLAN标签 v1: sudo ovs-ofctl add-flow m1-s1 in_ ...