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. NOIP模拟赛-2018.11.5

    NOIP模拟赛 好像最近每天都会有模拟赛了.今天从高二逃考试跑到高一机房,然而高一也要考试,这回好像没有拒绝的理由了. 今天的模拟赛好像很有技术含量的感觉. T1:xgy断句. 好诡异的题目,首先给出 ...

  2. WebService 的CXF框架 WS方式Spring开发

    1.建项目,导包. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  3. [转]VS2015+OpenCV3.3 GPU模块和opencv_contrib模块的编译以及采用CMake编译opencv_contrib时提示“No extra modules found in folder”问题的解决方案

    据官方说法,目前还不是太稳定的算法模块都在opencv_contrib里边,由于不稳定,所以不能在release版本里发行,只有在稳定以后才会放进release里边.但是这里边有很多我们经常要用的算法 ...

  4. 【转】为什么volatile不能保证原子性而Atomic可以？

    直接上好文链接!!! 为什么volatile不能保证原子性而Atomic可以?

  5. Android 在测试阶段当出现多个测试服务器地址时打包的小技巧

    前提:服务端没有做特殊处理 在开发android网络客户端项目时,不可避免的会用到“测试服务器地址”和“云端服务器地址”等.(有时可能会有多个) 这时在打包给测试那帮哥们时,你就需要一个服务器地址打上 ...

  6. java中sleep（）方法的解析

    Thread.sleep(3000); 就是指让当前正在运行的占用cpu时间片的线程挂起3000ms,把cpu的时间片交给其他线程,但是并没有指定把CPU的时间片接下来到底交给哪个线程,而是让这些线程 ...

  7. jquery的$(document).ready()与js的window.onload区别

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  8. timestamp 字段

    项目中由于需求设计,数据库中需要一个timestamp时间戳类型的字段来作为区别数据添加和修改的标识.由于timestamp在SQL SERVER 2005数据库中,不可为空的timestamp类型在 ...

  9. 【LeeCode23】Merge k Sorted Lists★★★

    1.题目描述: 2.解题思路: 题意:将K个已经排序的链表合并成一个排序的链表,分析并描述所用算法的复杂度. 方法一:基于“二分”思想的归并排序.本文用非递归和递归两种方法实现. (1)非递归:归并排 ...

  10. Nginx 服务器的安装部署（CentOS系统）

    1.准备安装环境yum -y install gcc gcc-c++ automake pcre pcre-devel zlib zlib-devel open openssl-develgcc编译器 ...