qwguo

是 CSS 中的一个属性，用于设置文本、内联元素、表格单元格和表格列的书写方向、文本排列以及块流方向。以下是对。

鼠标光标样式设置

计数器基本使用不同样式的序列样式，和嵌套计数器。counter()，counter-increment，counter-reset，counter-set

content使用详解

上篇文章我们介绍了 clip-path 的基本概述和一些主要参数，这次我们来详细介绍一些各个参数的详细用法函数是clip-path的一种类型，它允许你定义一个圆形裁剪区域。circle()pxempositionleftcenterrighttopbottom以下是一些使用circle()在这个例子中，.element的可见区域是一个半径为 100px 的圆形，位于元素的中心。在这个例子中，我们明确指定了圆形的位置为(50% 50%)，这实际上与默认位置相同（即元素的中心）。

作用clip属性用于定义一个裁剪区域，该区域外的元素内容将不可见。适用元素clip属性只对绝对定位（）或固定定位（）的元素有效，并且元素不能设置，如果设置clip将不起作用(但是经过我的测试并没出现这个问题属性值：接受四个值，分别表示裁剪区域的左上角、右上角、右下角和左下角的位置，通常使用的形式。top:定义第一个裁切点开始坐标，也就是从元素左上角什么位置开始right：定义第二个裁切点坐标，也就是说横向裁切从元素什么位置结束，次之如果设置的小于top裁切的长方形没有宽度所以将不生效bottom。

box-shadow是 CSS 中的一个属性，用于在元素框的外部添加阴影效果。通过调整阴影的偏移量、模糊度、扩展距离和颜色，可以创建出各种独特的视觉效果。box-shadow是一个功能强大的 CSS 属性，通过调整其各个参数，可以轻松创建出各种独特的阴影效果。在网页设计中灵活运用阴影效果，可以使页面更加生动、立体和吸引人。**性能考量：**复杂的阴影效果，尤其是高模糊度，可能影响页面渲染性能，特别是对于动画或在性能较低的设备上。适度使用以保持性能。

是一个 CSS 属性，它用于定义输入光标（caret）的颜色。这里的“插入光标”（insertion caret）指的是在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。当值为一个具体的颜色值时，可以使用所有 CSS 支持的颜色表示方式，如 RGB、十六进制、命名颜色等。在这个例子中，可编辑区域内的文字颜色被设置为蓝色，而光标的颜色被设置为黄色。在这个例子中，输入框内的文字颜色被设置为蓝色，而光标的颜色被设置为红色。属性的元素）的插入光标（caret）的颜色。

是一个在 CSS 中创建元素倒影效果的非标准属性。尽管它在过去的一些 WebKit 浏览器中（如旧版的 Safari 和 Chrome）得到了支持，但由于它并未成为 CSS 标准的一部分，因此在现代浏览器中的兼容性较差。以下是对。

默认情况下，当行内元素跨越多行时，其背景、边框等样式会在每行的开始和结束处被裁剪，这可能导致视觉效果的不连续。然而，使用box-decoration-break属性，可以改变这种默认行为，确保在跨行、跨列或跨页时，元素的样式能够保持连续性和一致性。通过使用该属性，可以确保元素的样式在跨行、跨列或跨页时保持连续性和一致性，从而创建更具吸引力和一致性的视觉效果。另外，在某些浏览器中（如Chrome），可能需要添加浏览器前缀（如。）中，特别是在它们跨越多行、多列或跨页（如打印时）时的渲染方式。

上一篇文章我们介绍了的用法，其中都比较简单好理解，这边文章我们重点学一下属性，它用于定义边框图像如何被切割并应用到元素的边框上。这个属性允许你指定边框图像的四个边缘（顶部、右侧、底部、左侧）的向内偏移量，从而将边框图像切割成九个区域：四个角、四条边和一个中间部分。如下图所示：我们结合上边的图片来详细学习一下。

在CSS中，是一个强大的属性，它允许你使用图片来定义元素的边框，替代传统的纯色、虚线或实线边框。下面我们对属性进行详细学习：: 必需。指定作为边框图片的图像的路径。: 可选。定义图片如何被分割成九个部分来创建边框效果。可以是数值、百分比或填充关键词（fill），默认是100%。: 可选。设置边框图像的宽度，覆盖由产生的宽度。: 可选。设置边框图像超出边框盒的量。: 可选。定义图片如何在边框上重复。可能的值包括 , , , 和 。2. 简写形式常见简写形式为：如果只提供一个数值或百分比，它

是 CSS 逻辑属性的重要组成部分，用于在书写模式无关的情况下设置元素的内联方向边框。掌握并运用这些逻辑属性有助于创建出更灵活、适应性更强的网页布局和样式，特别是在响应式设计和多语言支持场景中。

这个属性是简写属性，可以同时设置 border-block-width、border-block-style 和 border-block-color。其中，border-block-start 用于设置元素的开始边界样式，而 border-block-end 用于设置元素的结束边界样式。在 CSS Grid 或 Flexbox 布局中，它尤其有用，因为它可以让你同时控制元素的顶部和底部边框，或者左侧和右侧边框，而无需分别指定。但在实际应用中需关注浏览器兼容性，并合理结合传统边框属性进行样式设定。

的逻辑组合，允许你同时设置元素的最小和最大高度。这些属性旨在让布局不再依赖于传统的物理方向（如上下左右），而是基于逻辑方向（如开始、结束、之前、之后）。这有助于在水平和垂直方向都能更好地控制布局，特别是在多语言环境中，其中文本可能从右到左或从下到上流动。因此，在使用此属性时，建议查阅最新的 CSS 规范并测试不同浏览器的兼容性。属性一起使用，以控制元素的盒模型（包括内容、内边距和边框）如何计算其总大小。是 CSS 中的一个属性，它用于设置元素的块级尺寸（即元素的高度）。

是一个 CSS 属性，用于控制元素的背面是否可见。它主要用于在进行3D转换时控制元素的背面可见性。当一个元素被旋转或进行其他3D变换时，通常浏览器默认会进行背面剪裁（backface culling），使得元素的背面不可见，以提高性能和减少不必要的渲染。然而，有时我们可能希望元素的背面在旋转过程中仍然可见，这时就可以使用。需要注意的是，不同的浏览器可能对这个属性的支持程度不同。的背面则被设置为可见。当这两个元素进行3D旋转时，的背面被设置为不可见，而。的背面将不会显示，而。的背面则会正常显示。

是一个强大的 CSS 属性，通过它可以为页面背景添加各种图形效果。然而，在使用时需要注意其性能影响和浏览器兼容性，并根据实际需求进行适当的应用和优化。通过不断学习和实践，我们可以更好地掌握这一属性，并将其应用于实际项目中，创造出更加美观和引人入胜的界面效果。它允许我们改变元素背后内容的视觉效果，从而创造出新颖、引人注目的界面设计。通过应用不同的滤镜函数，我们可以为页面背景添加模糊、亮度调整、颜色变换等效果。元素背后的内容将被应用模糊效果，同时元素的背景被设置为半透明的白色。

指定@keyframe动画的名称。/* 应用动画到元素 */

在 CSS 中是一个特殊的属性值，它允许我们重置元素或元素父级的所有属性到其初始值、继承的值或取消设置的值。这一属性非常有用，特别是在需要快速重置多个属性的情况下，它避免了逐一设置每个属性的繁琐过程。属性时，先仔细考虑其影响，并与其他样式管理工具（如 CSS Modules、BEM 等）结合使用，以确保样式的可维护性和一致性。属性提供了便利的重置功能，但在使用时也需要谨慎。过度使用可能会导致样式失去控制，特别是在大型项目中。

的宽度会随其父容器变化，而高度则会自动调整以保持1:1的比例。如果图片本身的宽高比不是1:1，超出容器的部分将被裁剪掉。是CSS的一个属性，用于设置元素的期望宽高比。它设置确保元素保持特定的比例，不受其内容或容器大小的影响。）分隔的两个数字，表示宽度与高度的比例。设置元素的宽高比为16:9。

accent-color修改input默认控件的颜色

css 属性选择器总结

css3 中的 element:nth-child(n)选择起详细用法

此选择器和nth-child(n)类似都是选择其父元素的第 n 个子元素，唯一的区别在于它是从父元素的子元素末尾开始往前数，一直到第一个子元素。

css文本省略号

image-renderingcss中的image-rendering是做什么的？我们在做页面的时候经常会处理一些图片，比如让图片自适应外层容器的大小，等比例缩小或者放大。1、我们在缩小图片的时候，原本大尺寸的图片经过强制缩放，会把相邻的像素点挤到一起，这个时候图片看上去就比原尺寸图片要模糊。2、图片放大也是，原尺寸的图片经过放大，图片中的每一像素点就会拉伸，这个时候图片也是会失真没像素边缘会模糊处理。我们在遇到这个上边的问题的时候一般处理的方式是做一些比较合适的图片来尽可能的解决想要的尺寸。或

css中的：fixed一般用来设置元素的固定定位，它的定位方式是依据窗口固定某个位置，在滚动滚动条的时候会一直固定在某个位置。在开发过程中我们经常会遇到这样的效果：某个元素有滚动条，它的一个子元素需要固定在这个元素的可视区域的某个位置，不随着滚动条的拖动跟随移动。要实现这样的效果最先想到的就是使用position:fixed但是它并不能实现我们上边说的这种效果，经过反复实验总结除了两种实现此效果的方法：第一种：使用position:absolute；来实现具体思路首先我们要知道position:abs

1、icomoonIcoMoon 正在努力为完美主义者构建和提供最佳的肖像和图标管理工具。IcoMoon 的图标库仅具有最好的图标。我们所有的图标都设计在精确的像素网格上。IcoMoon 应用程序允许您以许多不同的格式构建和使用自己的图标包，包括 SVG、聚合物、PDF、XAML、CSH、带连字的图标字体或良好的旧 PNG/CSS 精灵。它最早应用在bootstrap库当中IcoMoon 于 2011 年 11 月首次建成并发布。自发布以来，它改变了当今网络中使用图标的方式。IcoMoon 引入了第一

shape-outside 使用shape-outside 属性用来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。也就是说，当元素浮动的时候，元素周围的文字内容以何种方式环绕。语法：shape-outside: keyword | [keyword] Function | url | gradient | global具体值说明：关键字值nonenone: 不对浮动区域进行任何设置，使用浏览器的默认行为，文字以浮动元素的margin进行围绕;margin-

我们在开发手机端网站的时候经常会用到a连接跳转，然后有时候我们a连接包裹的是一张图片或者是其他非文字的元素。当我们单击连接区域的时候会出现蓝色半透明的背景颜色，想去掉这个也非常简单，通过设置下边属性可以实现：-webkit-tap-highlight-color: transparent | rgba(0, 0, 0, 0);这是上边的属性值为透明或者是其他颜色的透明度为0能达到效果。-webkit-tap-highlight-color介绍-webkit-tap-highlight-color是

背景设置是css中常用的属性，它能用来给元素设置背景颜色和背景图片，css早起版本中背景设置的项目不是很多，只能简单的设置背景颜色，背景图片，背景图片的位置，平铺方式等；css3为背景属性增加了很多功能，包括：设置多张背景图片，背景的大小，渐变背景等更过功能，接下来我们将详细介绍背景的多有属性值和用法background-colorbackground-color用来设置元素的背景颜色语法：/*css*//*关键字 透明*/background-color: transparent;/.

瀑布流源于国外的一家图片分享网站Pinterest，该网站是通过看上去多列布局的方式展示图片，并且每一列高度有内容多少来决定形成列中的项高度不统一形成的层次不齐的砌墙效果。瀑布流布局实现的多种方法瀑布流布局看上去属于多列布局的一种，每列宽度相等但是高度不固定，从而形成的类似于砌墙效果。基础布局介绍多列瀑布流布局通过创建相同宽度的多个列然后通过计算哪一列最低然后给列中添加元素来实现。代码：<div class="falls-1" id="falls_1"> <d.

两列布局使我们再做页面的时候用的最多的布局方式，也是设计稿种最常见的一种布局类型，一般分为：一列固定宽度另一列自适应宽度，两列自适应宽度，两列相同高度等形式 这篇文章将详细介绍各种两列布局的实现方式页面布局之两列布局的n种方法两列布局之表格布局说起表格布局是在css3之前兼容性最好的一种布局方式，使用表格做两列自适应宽度或者高度布局能够在ie6浏览器中得到很好的兼容。示例：查看案例：https://codepen.io/qwguo88/full/pogwJRK从上边的案例中可以看到通过使.

布局是前端开发最基础作重要的技能，两列，三列布局是网站页面中应用最多的一种布局样式基本上是：左右结构左边是分类右边是内容，左中右结构，主要内容在中间，两边放次要内容。在css刚刚兴起的时候页面的布局都是用的表格来实现的，随着css发展，各种浮动，定位布局开始流行，特别是css3的出现使得我们在实现一些复杂的页面布局变的简单，flex，grid，从事前端工作以来我是用过的页面布局方法记得我刚从事互联网工作的时候先接触的就是table表格布局页面，当时css并没有那么的普及（也或是是我不太了解）哪个时候.

‘以前我们在做页面得时候遇到设计师用特殊字体设计得特效文本效果我们得处理办法是做成固定得图片，然后应用到网站中，使用图片文字只能是固定不变的，这并不是我们期望的。’‘随着浏览器得更新迭代，现在的浏览器已经基本支持我们引入外部字体库，并且应用到网站，同时我们可以随时更改文本内容’css3中的自定义字体方法@font-face@font-face属性可以让我们自定义网站字体属性，然后引用到想要应用该字体的元素上。基本语法：@font-face { font-family: <font.

‘Grid是CSS3中网格布局系统，也是CSS3中最强大的布局系统。它是一个二维布局系统，这意味着它可以处理列和行，不像flex弹性布局主要是一维系统，他像表格一样可以让我们控制行或者例对齐，可以控制子元素跨行或者跨列，但是他比表格更加灵活，它的子元素可以单独定位就像CSS定位元素一样，同时还可以重叠单元格。’‘您可以使用网格布局，通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（它们成为网格项）’css3中的grid布局学习基本概念我们这里用我们最熟悉城市街道来理解这些概念。.

我们经常会遇到这样的问题，纯数字不能自动换行，连续输入的英文不能换行，或者篇文章中一行到达容器的末端以后没有在我们想要的位置进行换行，换行后会截断某个单词等问题，今天我们就说说css中关于换行的一些属性，和使用技巧关于css中换行的一些学习在介绍之前我们先来看一下浏览器默认情况下文本的超出容器的处理情况：案例展示： https://codepen.io/qwguo88/full/RZMQgB通过上边的例子可以看出：连续的数字不会自动换行；连续的字母不会自动换行；英文文章中空格是由&amp.

在css中一提到变量大家都会想到css预处理LESS、SCSS、Stylus等语言中提供的变量使用，能够很方便的把我们经常需要更改的值统一归类管理，在我们需要更改色系样式的时候直接更改我们事先定义好的变量值，然后编辑成css就可以了。css预处理虽然让我们在写css变得更方便，但是毕竟还需要编译，需要去学习他们的语法。CSS3新功能之变量：variablescss3为我们提供了一个强大的功能自定义属性，也就是变量，他能让我们更改色系、皮肤、自适配变得简单。我们只需要更改一些我们事先定义好的变量就可.

我们在做页面布局的时候经常会有上下左右居中的设计，由于大部分的页面结构都是左右式排版页面是固定宽度的，而元素是自上而下排列，高度不固定。所以在页面中css实现左右居中比较容易，垂直居中就不太好实现了。在css3之前我们前端技术人员要实现垂直居中布局往往需要绞尽脑汁的去解决各种浏览器兼容问题，而随着时间的推移，ie浏览器已经退出历史舞台，现在的浏览器已经完全支持css3的各种布局方式，在css3中实现居中布局已经变得非常容易元素垂直居中的n种方法本文章收集了多种实现居中布局的方法，并且按照实现的时.

在css3之前我们如果想要自定义浏览器默认的滚动条样式是无法实现的，一般的做法是通过html+css+js来实现自定义滚动条，或者网站找现成的插件，做法都比较麻烦，IE虽然可以自定义滚动条，但是也只是改一些颜色而已不能做到绚丽的效果。css3实现了自定义滚动条效果，可以让我们设置滚动条宽度，颜色，圆角等效果，遗憾的是只有webkit内核的浏览器支持。webkit内核滚动条webkit内核的浏览器：chrome、safari、edge，因为自定义滚动条目前只有webkit内核的浏览器支持和Fire.