css3-文本新增属性
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-文本新增属性的更多相关文章
- CSS3 文本常用属性
CSS 常用属性 text-shadow属性文字阴影:第一个值背景相对原本文字居左的距离,第二个值据当前文本上方的距离,第三个值清晰度(越小越清晰),第四个值颜色 word-wrap:自动换行,如果是 ...
- 【CSS3】 新增属性
一. box-shadow(阴影效果) 使用: box-shadow: 20px 10px 0 #000; -moz-box-shadow: 20px 10px 0 #000; -webkit-box ...
- CSS3背景相关新增属性
background-clip border-box:充满边框和内边距,内容. padding-box:充满内边距,内容 content-box:只充满内容 background-origin bor ...
- CSS3文本温故
1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...
- CSS3 文本效果(阴影)
CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...
- CSS3：CSS3 文本效果
ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...
- css3新增属性API
写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz- 主要是firefox火狐 -webikt-主要是chr ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- 4.css3文本属性
1.css3文本属性: ①Color:颜色. ②Text-align:文本水平对齐方式. ⑴Left默认值,right,center,justify两端对齐: ⑵新增start相当于left,end相 ...
随机推荐
- Github进行fork后如何与原仓库同步
https://blog.csdn.net/myuantao3286286/article/details/50477139
- ThreadLocal解决SimpleDateFormat多线程安全问题中遇到的困惑
测试代码: public class Main { public static void main(String[] args) { for (int k = 0; k < 10; k++) { ...
- 有意思的flex 色子布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- linux内核中socket的创建过程源码分析（详细分析）
1三个相关数据结构. 关于socket的创建,首先需要分析socket这个结构体,这是整个的核心. 104 struct socket { 105 socket_state ...
- GrowingIO接入SDK简介
安装使用文档逐步操作 准备工作: 1.注册一个GrowingIO账号 2.申请一个域名(注意:不能是ip或host) 登陆gio平台: 1.安装SDK 2.根据项目选择对应的sdk:js,安卓,ios ...
- php初进一个项目组，使用几个函数帮忙熟悉流程
初进一个项目组的时候,可能对他的框架啊神马不熟悉的.有时候类里又有各种魔术方法的使用,IDE还跳转不过去对象的方法.这时候很多php内置函数就可以帮上些忙了. 1. instanceof 2. get ...
- 编译最新的SQLite 3.8.4.3为一个DLL
SQLite是一个小型数据库.特别适合于client应用程序使用,它的众多优点就不多说了.有兴趣的去搜索. 话说使用吧. 我们要使用.就须要调用它.如今一步一步来. 第一步:上SQLite官网http ...
- datatables.js 简单使用--弹出编辑框或添加数据框
内容:选中某一条记录,弹出编辑框 环境:asp.net mvc , bootstrap 显示效果: 代码: 至于怎么弄多选框,在上一篇博客里已经有说明. 主要用到了bootstrap的模态窗,下面代 ...
- Elasticsearch date 类型详解
引言 一直对 elasticsearch 中的 date 类型认识比较模糊,而且在使用中又比较常见,这次决定多花些时间,彻底弄懂它,希望能对用到的同学提供帮助. 注意:本文测试使用是 elastics ...
- 4字节emoji表情对应的Unicode编码获取和编码转换
GitHub Flavored Markdown 今天研究了一天Markdown移动端和pc端统一实现方式,由于以前有搞过移动端富文本编辑器,搞Markdown简单多了: 其中GFM的表情语法不错,比 ...