欢迎光临
我的个人博客网站

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; }

css3新增文本属性

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>&mdash; Maya Angelou</p>     </blockquote> </body>

css3新增文本属性

3.text-overflow(文本溢出)💡

text-overflow 文本溢出属性指定应向用户如何显示溢出内容。它可以被剪切,显示一个省略号(’…’,U + 2026 HORIZONTAL ELLIPSIS)或显示一个自定义字符串。

css3新增文本属性

 注意:

  • 这个属性对那些在块级元素溢出的内容有效,但是必须要与块级元素内联(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中新增的文本属性介绍完了,有不对的望各位大佬明确指出~~🧡💛💚💙💜🤎🖤

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » css3新增文本属性
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏