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. pytorch的一些函数

    1.tensor的view函数: view(*args) → Tensor 返回一个有相同数据但大小不同的tensor. 返回的tensor必须有与原tensor相同的数据和相同数目的元素,但可以有不 ...

  2. pyspider爬取数据存入es--2.测试数据库连通性

    写一个简单案例测试能否将数据写入es #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on 2017-10-27 08:35:57 ...

  3. ubuntu系统中Qt creator 编辑和应用使用中文输入法

    在ubuntu系统的GUI开发过程中遇到在编辑器里面不能使用中文输入法,前提我已经安装了搜狗输入法,但是还是不能使用,原因是QT的库里没有最新fcix的库,. 没有安装搜狗的输入法的 https:// ...

  4. 关于CAN总线的被动错误标志的问题？

    关于CAN总线的被动错误标志的问题? 关于CAN总线的被动错误标志,协议中的描述是"处于被动错误状态的单元检测出错误时,输出被动错误标志". 对此有几个疑问: 1.被动错误标志的发 ...

  5. 搞个组装机:D

    时间:2016年7月 主机:就是主机 整机:主机+显示器 推荐:自己组装,淘宝或者京东,或者去淘宝上的宁美国度.攀升兄弟看看. 4000多块配个电脑: 处理器:i5 4590 散片(发热量小) 111 ...

  6. 2017-2018-2 20155310『网络对抗技术』Exp5：MSF基础应用

    2017-2018-2 20155310『网络对抗技术』Exp5:MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode exploit:由攻击者或渗透测试者利 ...

  7. Wpf(Storyboard)动画简单实例

    原文:Wpf(Storyboard)动画简单实例 动画的三种变换方式 RotateTransform:旋转变换变化值:CenterX围绕转的圆心横坐标 CenterY纵坐标 Angle旋转角度(角度正 ...

  8. 【php增删改查实例】第四节 -自己 DIY 一个数据库管理工具

    本节介绍如何自己DIY一个数据库管理工具,可以在页面输入sql 进行简单的增删改查操作. 首先,找到xampp的安装目录,打开htdocs: 新建一个php文件,名称为 mysqladmin.php ...

  9. python3 的 round 函数的 练习

    python3 的 round 函数感觉很别扭,其运算结果与习惯不相符.特记录下来: 代码 ''' python 3的 round 函数 是"四舍六入五成双"的 https://w ...

  10. centos7 安装 telnet

    https://blog.csdn.net/wfh6732/article/details/55062016/ https://blog.csdn.net/typa01_kk/article/deta ...