CSS非布局样式：边框、滚动、文本折行、装饰性属性

CSS学习 本文总阅读量次

边框

边框的属性border

可参考笔记CSS边框、列表

CSS3边框背景图属性border-image

  • border-image属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。
  • border-image属性是速记属性,用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。
  • 省略的值设置为它们的默认值。
  • 需要配合属性border一起使用。
  • JavaScript 语法: object.style.borderImage="url(border.png) 30 30 round"
  • 点击可看完整例子
    例子中用的图
  • 可参考MDN、菜鸟教程

如何使用CSS实现 三角形/扇形

使用边框实现三角形/扇形

例子：
当我们分别设置border-bottom和border-right时可以发现，两个边框衔接处是斜线：
两个边框衔接处是斜线

通过设置右边框为透明的（transparent）可以得到“直角梯形”：
直角梯形

同样设置左边框，得到等腰梯形：
等腰梯形

只要去掉“上底边”我们就能得到三角形，而 底部边框 的上面试盒子区域，所以我们可以将盒子的宽度缩小至0，则上底边消失：
边框中间是盒子区域
将盒子的宽度缩小至0，则上底边消失

三角形的宽度是由左右两边框的粗细决定的，所以我们可以通过缩小左右两边框的的宽度使三角形成为锐角三角形：
锐角三角形

扇形：添加border-radius属性（圆角）（笔记可参考这里）
扇形

滚动（overflow属性）

  • CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时该做什么。
  • 它是 overflow-x 和overflow-y的 简写属性 。
  • 可参考MDN
属性值 含义
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容不可见
scroll 内容会被修剪，浏览器会显示滚动条以便查看其余内容
auto 由浏览器定夺，如果内容被修剪，就会显示滚动条
inherit 规定从父元素继承overflow属性的值

例子：
例子

文本折行(CSS3属性)

  • 当我们遇到文字在一行放不下时会有一系列问题：是否换行，什么时候换行，在哪里换行，针对什么东西换行？
  • 在CSS3中这些主要就是下面3个属性决定的。（这三个属性可以组合使用）
  • **总结**一下三个属性：
    • white-space，控制空白字符的显示，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line
    • word-break，控制单词如何被拆分换行。它有三个值：normal | break-all | keep-all
    • word-wrap（overflow-wrap）控制长度超过一行的单词是否被拆分换行，是word-break的补充，它有两个值：normal | break-word

overflow-wrap(word-wrap)属性 通用换行控制

  • overflow-wrap属性 即 word-wrap属性（但是**overflow-wrap有时候兼容性不好**，所以大多使用word-wrap）
  • overflow-wrap(word-wrap)属性决定换行时是否保留单词完整（即：当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行）
  • 默认属性值normal:保留单词完整
  • 可参考MDN
属性值 含义
normal （默认）保留单词完整
break-word （打断单词）如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行
（但在这种情况下任然会尽量保证单词的完整性,希望去除单词完整性则需要使用word-break属性）

例子：
默认值时，超出范围的超长单词被保留：
normal
属性值为break-word时，超出范围的超长单词被折断：
break-word
但在这种情况下任然会尽量保证 单词的完整性（可以看到and没有被折断）,希望去除 单词完整性 则需要使用word-break属性。

word-break属性 针对多字节文字

  • word-break属性设置换行时的保留单位是否是单词
  • 注意：此时 中文句子 也会被识别为 单词。
  • word-break属性指定非CJK脚本的断行规则。（CJK脚本是中国，日本和韩国（”中日韩”）脚本）
  • 默认属性值是：
属性值 含义
normal （默认）使用浏览器默认的换行规则
break-all （打断所有的单词）允许在单词内换行
keep-all 只能在半角空格或连字符处换行（让所有的单词/中文句子都保持完整）【兼容性不好】

例子：
默认下是：
normal
修改属性值为break-all后，打断所有的，不管是不是一个单词，所以and也被折行了：
break-all
修改属性值为keep-all后，让所有的单词/中文句子都保持完整：
keep-all

white-space属性 空白处是否换行

  • white-space属性指定元素内的空白怎样处理（是否换行）。
  • 空白处默认会被浏览器忽略，
属性值 含义
normal (默认)空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的<pre>标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

例子：
默认下是：
normal
修改属性值为nowrap后，文本不会换行:
nowrap

面试题

问题：如何让一个很长的文本不换行？
答案设置该文本的white-space属性为nowrap。

装饰性属性

字重（粗体）font-weight属性

可参考笔记CSS文本

斜体 font-style属性

  • font-style属性默认值为normal,斜体font-style：itatic
  • itatic记忆方法：意大利写斜体字。
  • 可参考笔记CSS文本

下划线 text-decoration属性

可参考笔记CSS文本

指针 cursor属性

  • 常见的point属性值就是“手型”。
  • 可参考笔记CSS文本
CSS学习