CSS中的非布局样式

19,929次阅读
没有评论

共计 602 个字符,预计需要花费 2 分钟才能阅读完成。

前言

CSS 中,有很多 非布局样式,这些样式(属性)和与布局无关,包括:

  • 字体、字重、颜色、大小、行高
  • 背景、边框
  • 滚动、换行
  • 装饰性属性(粗体、斜体、下划线)等。

这篇文章,我们来对上面的部分样式做一个回顾。

边框

如何用边框画一个三角形?详见《02-CSS 基础 /06-CSS 盒模型详解》中的最后一段。

文字换行

  • ovferflow-wrap:通用的属性。用来说明当一个不能被分开的字符串(单词)太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词 中断换行

  • word-break:指定了怎样在单词内断行。这里涉及到 CJK(中文 / 日文 / 韩文)的文字换行。

  • white-space:空白处是否换行。

上面这三个 css 属性进行组合,可以设置各种不同的属性。

当然,如果想让一段很长的文本不换行,可以直接设置white-space: nowrap 这一个属性即可。如果想换行,可以试试white-space: pre-wrap

CSS Hack

  • CSS Hack 的方式:不合法但可以生效的写法。

  • 可以用来解决一些浏览器的兼容性问题。

  • 缺点:难理解、难维护、易失效(比如浏览器升级后,hack 可能会失效)。

  • 替代方案:特性检测。

  • 替代方案:针对性加 class

CSS 效果

我们可以利用 CSS 实现各种效果,常见的效果属性有:

  • box-shadow:盒子的阴影

  • text-shadow:文本的阴影

  • border-radius

  • background

  • clip-path

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-09-10发表,共计602字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)