css3新增文本属性
css3新增属性
- 边框属性
- 背景属性
- 文本属性
- 颜色属性
文本属性
属性 | 说明 |
text-shadow |
为文字添加阴影 |
box-shadow |
在元素的框架上添加阴影效果 |
text-overflow |
确定如何向用户发出未显示的溢出内容信号 |
word-wrap |
允许对长的不可分割的单词进行分割并换行到下一行 |
word-break |
指定了怎样在单词内断行 |
1. text-shadow(文字阴影)
text-shadow
为文字添加阴影,阴影值之间用逗号隔开,每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成
语法:
div{
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb; /* color | offset-x | offset-y */
text-shadow: white 2px 5px; /* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px; /* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
}
注意:
- 阴影相对文字的偏移量必写,颜色和模糊半径可选
- 当阴影大于一个时要用逗号区别开阴影之间的参数
- 当所给的阴影大于一个时,阴影应用的顺序为从前到后, 第一个指定的阴影在顶部.
- 这个属性同时适用于
::first-line
以及::first-letter
伪元素
例:
h1
{
/*水平阴影,垂直阴影,模糊的距离,以及阴影的颜色*/
text-shadow: 5px 5px 5px #FF0000;
}
2. box-shadow(盒子阴影)
box-shadow
属性用于在元素的框架上添加阴影效果,可以设置多个阴影效果,并用逗号将他们分隔开该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
几乎可以在任何元素上使用box-shadow
来添加阴影效果。如果元素同时设置了 border-radius
属性 ,那么阴影也会有圆角效果。
语法:
div{
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal; /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black; /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold; /* 任意数量的阴影,以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive; /* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
}
在这里,如果 border-radius
属性的值:
- 两个值:表示x和y的偏移量
- 三个值:第三个值越大,模糊面积越大,阴影就越大越淡,但不能为负值(模糊度)
- 四个值:第四个值取正值时,阴影扩大;取负值时,阴影收缩(模糊范围)。默认为0,此时阴影与元素同样大
inset
关键字:如果没有指定inset
,默认阴影在边框外,即阴影向外扩散;使用inset
关键字会使得阴影落在盒子内部
例:
<style>
blockquote {
padding: 20px;
box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
}
</style>
<body>
<blockquote><q>You may shoot me with your words,<br/>
You may cut me with your eyes,<br/>
You may kill me with your hatefulness,<br/>
But still, like air, I'll rise.</q>
<p>— Maya Angelou</p>
</blockquote>
</body>
3.text-overflow(文本溢出)
text-overflow
文本溢出属性指定应向用户如何显示溢出内容。它可以被剪切,显示一个省略号('...',U + 2026 HORIZONTAL ELLIPSIS)或显示一个自定义字符串。
注意:
- 这个属性只对那些在块级元素溢出的内容有效,但是必须要与块级元素内联(inline)方向一致(举个反例:内容在盒子的下方溢出。此时就不会生效)
- 这个属性并不会强制“溢出”事件的发生
文本可能在以下情况下溢出:当其因为某种原因而无法换行(例子:设置了"white-space:nowrap"),或者一个单词因为太长而不能合理地被安置(fit)
“关于更多text-overflow
属性的使用,在这里我已经做出了详解:点击链接跳转 ”
3.word-wrap(单词换行)
word-wrap
自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字
注意:
word-wrap
属性原本属于微软的一个私有属性,在CSS3现在的文本规范草案中已经被重名为overflow-wrap
word-wrap
现在被当作overflow-wrap
的 “别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
p {
/*表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行*/
word-wrap:break-word;
}
4.word-break(单词拆分换行)
word-break
指定了怎样在单词内断行
div{
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */
}
normal
:使用默认的断行规则break-all
:对于non-CJK (CJK 指中文/日文/韩文) 文本,允许在单词内换行。keep-all
:只能在半角空格或连字符处换行
OK,在这里我大概把css3中新增的文本属性介绍完了,有不对的望各位大佬明确指出~~
css3新增文本属性的更多相关文章
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3新增的属性有哪些
徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...
- CSS3新增的属性有哪些:
CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...
- css3新增的属性 - 分享
CSS3新增属性 一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...
- CSS3 新增文本样式
CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影 可以给文字添加阴影效果了 Shadow 影子 语法: text-sha ...
- CSS3新增基础属性总结——20160409(易达客)
1.box-shadow :h-shadow v-shadow blur spread color inset(outset) h-shadow:必须:水平阴影位置,允许负值. v-shadow:必须 ...
- 【CSS3】文本属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css3新增的属性
由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀, 如:-moz- firefox火狐 -ms- IE ...
- Css3 新增的属性以及使用
Css3基础操作 . Css3? css3事css的最新版本 width. heith.background.border**都是属于css2.1CSS3会保留之前 CSS2.1的内容,只是添加了一些 ...
随机推荐
- PyTorch安装及试用 基于Anaconda3
设置Torch国内镜像 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/pytorch/ ...
- 学习 Webpack5 之路(优化篇)
一.前言 从 0 到 1 学习的朋友可参考前置学习文章: 学习 Webpack5 之路(基础篇) 学习 Webpack5 之路(实践篇) 前置文章 学习 Webpack5 之路(基础篇) 对 webp ...
- vue element-ui 组件上传图片 以及对 图片的 宽高 和 大小 格式等 做出限制
vue 文件: 自行引用 elemen-ui <el-upload action=" 让后端给你上传地址 " ...
- 将数据保存到excel文件(纯前端实现)
// 导出excel文件 /** * 依赖: import XLSX from 'xlsx' */ let obj = { '学生信息表': [ ['姓名', '性别', '年龄', '分数'], [ ...
- Redis的配置文件redis.conf的解析
1.redis的配置文件为redis.conf 2.redis配置文件redis.conf中关于网络的配置 3.redis配置文件redis.conf中的日志配置 4.redis配置文件redis.c ...
- noip模拟21
开题发现这场考过,定睛一看,发现是省选前最后一场,没改过呀--但是还是讲武德的赛时没提交 A. Median 神奇之处在于 \(1e7\) 个质数居然能线性筛出来~ 那么 \(S2\) 可以直接筛出来 ...
- Appium问题解决方案(5)- selenium.common.exceptions.InvalidSelectorException: Message: Locator Strategy 'name' is not supported for this session
背景 使用Appium Server 1.15.1版本 执行了以下脚本 test = driver.find_element_by_name("自动化测试") print(test ...
- adb 常用命令大全(6)- 模拟按键输入
语法格式 input [<source>] <command> [<arg>...] 物理键 # 电源键 adb shell input keyevent 26 # ...
- javaScript对象——function对象
1.基本对象和Function(函数)方法对象 2.概念 3.创建function对象的三种方式: 第一种不建议使用 2.3两种方式就是方法名位置不同,建议使用: 4.方法调用只要名字对,实参不一定完 ...
- 三剑客之awk 逐行读取
目录: 一.awk工作原理 二.按行输出文本 三.按字段输出文本 四.通过管道,双引号调用shall命令 五.CPU使用率 六.使用awk 统计 httpd 访问日志中每个客户端IP的出现次数 一.a ...