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. easyui combobox 带 checkbox 亲自验证

    $('#cc').combobox({                url:'combobox_data1.json',                method:'get',           ...

  2. openfalcon agent 监控数据

    [root@nginx1 ~]# cat /proc/sys/fs/file-nr 791435 已分配文件句柄的数目  已使用文件句柄的数目  文件句柄的最大数目  [root@nginx1 ~]# ...

  3. Android 打造属于自己的照片选择器

    前言 在做第一个项目时照片选择器使用了开源的PhotoPicker 渐渐无法满足需求,就想着打造一款属于自己的照片选择器. 花了一周的时间完成了该项目,其实代码有一大半并非自己写的,在阅读PhotoP ...

  4. C#自定义控件开发

    自定义控件开发 一般而言,Visual Studio 2005中自带的几十种控件已经足够我们使用了,但是,在一些特殊的需求中,可能需要一些特殊的控件来与用户进行交互,这时,就需要我们自己开发新的.满足 ...

  5. opencv中的bitwise_not,bitwise_xor,bitwise_or,bitwise_and的使用方法与效果。

    1.将二指图片的效果反转既黑色变白色,白色变黑色. 使用 bitwise_not(InputArray src, OutputArray dst, InputArray mask = noArray( ...

  6. 提高SQL查询效率的30种方法

    转载:提高SQL查询效率的30种方法 内容摘录如下: 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中 ...

  7. Docker安装Python3.5

    方法一.通过 Dockerfile 构建 创建Dockerfile 首先,创建目录python,用于存放后面的相关东西. mkdir -p ~/python ~/python/myapp myapp目 ...

  8. Codeforces round 1103

    Div1 534 我可能还太菜了.jpg 果然我只是Div 2 选手 A (这题是Div1吗... 直接构造:竖着放的在第一行和第二行,然后横着放的时候直接放在第三行就行. #include < ...

  9. BZOJ4999: This Problem Is Too Simple!树链剖分+动态开点线段树

    题目大意:将某个节点的颜色变为x,查询i,j路径上多少个颜色为x的点... 其实最开始一看就是主席树+树状数组+DFS序...但是过不去...MLE+TLE BY FCWWW 其实树剖裸的一批...只 ...

  10. ccf201703-2学生排队

    问题描述 体育老师小明要将自己班上的学生按顺序排队.他首先让学生按学号从小到大的顺序排成一排,学号小的排在前面,然后进行多次调整.一次调整小明可能让一位同学出队,向前或者向后移动一段距离后再插入队列. ...