# CSS - CSS3视觉结构优化控制

HTML语言对其内容信息作以布局归属同时或之后，就需要通过CSS对其元素进行像素级的控制与修饰，已达到最友好的视觉体验效果。CSS3也是对其原CSS的一种升级与拓展，更为充分的渲染页面提升页面性能。同时，这也是web前端开发者应具备了解且熟练应用的计算机语言。

Canonical: https://www.deathghost.cn/catalog/css

Keywords: CSS, CSS3, 层叠样式表, CSS动画, CSS选择器

## CSS

CSS3视觉结构优化控制

- [CSS container容器查询](https://www.deathghost.cn/article/css/112)
  2023-02-28 19:12:24 - @container规则是CSS 根据指定容器尺寸发生变化时，在满足条件的情况下设置其内部元素样式。如同@media一般，不同的是@container针对容器元素，而@media针对的是浏览器窗口。
- [input[type=checkbox]与input[type=radio]颜色设置 - accent-color](https://www.deathghost.cn/article/css/103)
  2021-10-15 22:16:11 - Web前端开发中相信很多人面对表单元素都会将其原始样式重置或借助非表单元素来模拟表单控件，之所以这般操作，是因为表单控件显示取决于设备、操作系统和浏览器。为了达到UI风格的统一，不得已而为之。
- [CSS自定义属性 - 变量的声明与读取](https://www.deathghost.cn/article/css/102)
  2021-09-17 21:19:04 - 变量这个词在程序开发中基本都会用到，我们可以对其赋值，也可以存储且获取它。如果将其应用在CSS样式表中，又当如何呢？以前大家基本借助SCSS或LESS中变量定义亦或直接定义类。所以，今天看看原生CSS中如何自定义属性（即：CSS变量）应用。
- [:is() - 告别讨厌的选择器重复](https://www.deathghost.cn/article/css/101)
  2021-08-15 14:23:42 - 编写CSS时大部分人喜欢借用SCSS或LESS工具，想必大家也能体会到它的便捷性；同时也能感受到原始CSS编写时的麻烦。下面看看使用:is() CSS 伪类函数如何优雅处理重复父选择器的问题。
- [始终显示input标签在type值为number状态下的箭头](https://www.deathghost.cn/article/css/100)
  2021-08-13 22:27:32 - "number"类型的 元素用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。右侧末端将会有上下箭头可供鼠或手指对输入的数值进行增加或减少操作。
- [CSS 设置插入光标形状与颜色](https://www.deathghost.cn/article/css/97)
  2021-06-10 21:40:33 - 当你在一个文本框或某种应用中输入文字时,总有一个光标来显示你将要输入文字的位置。大部分的光标都为一个小竖线闪动状态；我们在使用计算机过程中，有些场景下光标还有短下划线或块状式样的，下面看看如何通过CSS定义插入指针的形状与颜色……
- [CSS filter 滤镜 - 快速设置页面深色主题模式](https://www.deathghost.cn/article/css/96)
  2021-06-07 20:59:20 - 手机设置中的深色模式、后台管理系统中的主题切换以及有些网站中的明暗主题样式切换等都是一种视觉上的处理。作用也就是让用户可以在不同的光线环境下自主选择，同时也是对眼睛的一种放松。
- [使用CSS :target 伪类实现Drawer抽屉弹窗与Modal模态对话框](https://www.deathghost.cn/article/css/95)
  2021-05-10 21:23:50 - Web应用中时常会看到一些弹窗，如抽屉(侧滑弹窗)与模态对话框之类组件，通常我们会通过JavaScript实现其显示与否，下面看看通过CSS伪类:target如何实现。
- [:fullscreen设置元素在全屏模式下的CSS样式](https://www.deathghost.cn/article/css/93)
  2021-04-25 21:08:23 - 全屏API可以让Web前端开发人员通过JavaScript轻松控制浏览器全屏模式的进入与退出，如同按下F11键一样的效果。这篇文章不谈JavaScript，看看CSS如何设置在处于全屏模式下元素的样式。
- [CSS text-combine-upright 竖行横书组合](https://www.deathghost.cn/article/css/86)
  2020-11-26 23:09:17 - 我们都知道竖书成行，自右向左换行是古文中的一种书写方式。那么在CSS中writing-mode就定义了文本在水平或垂直方向上排列方式。下面我们通过writing-mode这个属性定义一个“竹简”书写方式，同时如果在竖行文本中穿插阿拉伯数字时又当如何？
- [关于 CSS函数min()、max()与clamp()的使用](https://www.deathghost.cn/article/css/85)
  2020-11-21 18:55:33 - 随着响应式设计的发展且日益细化，CSS本身也在不断发展，并为前端开发者提供了更多的选择与控制权；对于我们而言归功于现代浏览器的支持。下面了解如何使用这些受支持的CSS函数控制元素的大小进而满足前端工程师在实际项目中的应用。
- [CSS background-repeat 背景图的重复方式](https://www.deathghost.cn/article/css/78)
  2020-07-01 22:12:29 - 我们都知道background-repeat 是 CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复，今天看看另2个属性值效果。
- [CSS Emphasis Marks 文本强调标记](https://www.deathghost.cn/article/css/77)
  2020-06-18 23:50:30 - 我们常常会在网页中对文本某一关键词进行凸显强调，加粗、高亮、下划线等等一系列相对匹配的样式去装饰进而引起用户注意，今天我们看看另一种实现方法text-emphasis。
- [仅使用CSS制作轮播](https://www.deathghost.cn/article/css/72)
  2020-04-27 23:56:58 - 在不使用JavaScript或其他库的情况下，如何使用HTML布局和CSS属性制作轮播图，精心制作，实际运用中也未尝不可！
- [CSS粘性定位固定表格thead部分元素小方法](https://www.deathghost.cn/article/css/52)
  2019-07-13 20:39:09 - 我们都知道CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。任务一种布局都可以通过N多种方式将其设定，今天看看通过属性值sticky来固定表格头部内容。
- [CSS Grid 二维网格结构布局](https://www.deathghost.cn/article/css/49)
  2019-06-01 23:21:55 - CSS Grid 网格布局可以将包裹元素任意组合成不同的网格，进而快速、便捷的对页面结构进行布局，提高工作效率。当然了，每一种布局方法都有各自优势，所以，我们无需纠结使用什么方法，而是在什么条件下使用什么方法。目的只有一个，高效、便捷。
- [CSS columns多列布局 实现瀑布流布局效果](https://www.deathghost.cn/article/css/48)
  2019-05-26 23:37:30 - CSS columns多列布局规范经常被忽略，我们可以通过CSS columns实现类似报纸上的文本内容排版一般亦或瀑布流排版布局。
- [CSS 省略文本字符串开头与结尾 无聊的小测试](https://www.deathghost.cn/article/css/45)
  2019-03-13 22:49:47 - 我们都知道CSS3（均以CSS称之）中属性text-overflow可以对溢出文本进行截取、显示省略号或自定义字符串。
- [box-decoration-break处理行内元素跨行跨列断裂样式渲染的完整性](https://www.deathghost.cn/article/css/43)
  2019-01-09 22:36:03 - 多行文本亦或多列文本元素中，我们对其特殊提醒性关键词添加特殊样式时，如果出现元素内文本跨行或跨列断裂，则样式也随之断裂，一定程度影响其视觉效果，这里通过css中box-decoration-break属性对其修饰渲染。
- [CSS Scroll Snapping滚动吸附锁定元素或位置](https://www.deathghost.cn/article/css/40)
  2018-12-02 23:49:43 - CSS scroll snapping可以使使web滚动吸附锁定到元素片段位置，进而提升用户对页面的视觉体验效果。通过设置该属性可以对XY纵横滚动加以锁定控制，从而使得元素信息更好的展示在用户可视范围内。
- [flex网页布局首选方案 灵活应用css flex弹性布局快速构建web结构](https://www.deathghost.cn/article/css/38)
  2018-10-18 23:56:17 - 传统页面基础布局我们时常会使用position、float等一些css属性对其修饰，进而达到设计效果，想必经历过的亲们都感觉到很是不便；那么，flex布局将会让你便捷地实现页面的基础结构布局。
- [CSS属性scroll-behavior定义浏览器滚动位置或跳转新位置行为](https://www.deathghost.cn/article/css/34)
  2018-08-27 22:32:30 - scroll-behavior在CSS中的属性允许我们定义浏览器的滚动位置是否跳转到新位置，或者当用户点击指向滚动框内锚定位链接时的动画转换。即为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。
- [合理借助CSS伪元素:before与:after实现页面辅助设计 CSS伪元素实例应用技巧](https://www.deathghost.cn/article/css/33)
  2018-08-18 14:28:53 - CSS伪元素用于向某些选择器设置特殊效果，我们在实例项目中常常会使用它对其页面辅助设计，避免不相干（无用）的标签元素布局，进而使得代码结构清晰明了，同时达到自己想要的视觉效果。