分类 css 下的文章

2024-08-11

Container Queries是WebKit引入的一个新特性，旨在使CSS能够根据其父容器的大小进行调整。这种方式可以使得设计师和开发者能够创建更加灵活和响应式的布局。

以下是一个简单的示例，展示了如何使用Container Queries:




/* 当容器宽度小于600px时，改变背景颜色为蓝色 */
.container {
  container-type: inline-size;
  container-name: small-container;
  @container (min-width: 600px) {
    background-color: blue;
  }
}
 
/* 另一个CSS规则可以基于small-container这个名字来应用样式 */
@container-type small-container (max-width: 400px) {
  background-color: red;
}

在这个例子中，.container 元素将根据其父容器的大小改变背景颜色。如果父容器的宽度小于600px，背景颜色将变为蓝色。如果父容器的宽度小于400px，背景颜色将变为红色。

Container Queries的使用场景非常广泛，可以用来创建响应式的组件，比如弹窗、下拉菜单等，使得这些组件可以根据宿主环境的大小进行调整。

- 阅读更多 -

css实现边框跑马灯效果（彩虹，渐变，叠加）

System

2024-08-11

所有,css

要使用CSS实现边框跑马灯效果，可以通过关键帧（keyframes）动画和border属性来实现。以下是一个简单的示例，展示如何创建一个边框跑马灯效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框跑马灯效果</title>
<style>
  @keyframes marquee {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
 
  .marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 10px;
    border: 5px solid transparent;
    animation: marquee 10s linear infinite;
  }
 
  .marquee--primary {
    border-image: linear-gradient(to right, #30cfd0 0%, #330867 100%) 1;
    border-image-slice: 10;
  }
 
  .marquee--secondary {
    border-image: linear-gradient(to right, #ff6e7f 0%, #5085ff 100%) 1;
    border-image-slice: 10;
    animation-delay: 2s;
  }
 
  .marquee--overlay {
    position: relative;
  }
 
  .marquee--overlay::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 5px solid #ffeb3b;
    animation: marquee 10s linear infinite;
    animation-delay: 4s;
  }
</style>
</head>
<body>
 
<div class="marquee marquee--primary">跑马灯效果 - 彩虹边框</div>
<div class="marquee marquee--secondary">跑马灯效果 - 渐变边框</div>
<div class="marquee marquee--overlay">跑马灯效果 - 叠加边框</div>
 
</body>
</html>

这段代码中定义了三种不同的边框跑马灯效果：

.marquee--primary 使用了一个由 #30cfd0 到 #330867 的线性渐变来创建彩虹边框，并通过动画使其从左至右无缝滚动。
.marquee--secondary 使用了一个由 #ff6e7f 到 #5085ff 的线性渐变来创建渐变边框，并有延迟动画开始，以模拟层次感。
.marquee--overlay 使用伪元素 ::before 来创建一个叠加边框效果，同样具有动画效果，并有延迟开始。

通过调节 @keyframes marquee 中的 from 和 to 属性，可以控制边框的滚动速度和方向。通过调整 border-image-slice 和 animation-duration，可以控制边框的宽度和滚动时间。

- 阅读更多 -

html表格中加入斜线，使用css给table表格表头单元格添加斜线

System

2024-08-11

所有,css

要给HTML表格的表头单元格添加斜线，可以通过CSS为表头单元格添加一个斜线背景。以下是实现这一效果的示例代码：

HTML:




<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格的内容行 -->
  </tbody>
</table>

CSS:




table thead th {
  background: linear-gradient(to right, transparent 50%, #000 50%);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: center right;
  position: relative;
}

这段CSS代码为<th>元素添加了一条斜线作为背景，斜线的颜色可以通过修改#000来更改。background-size属性定义了斜线的粗细和长度，可以根据需要进行调整。background-repeat设置为no-repeat确保斜线仅在指定的位置显示。

- 阅读更多 -

如何使 CSS 冲突可预测

System

2024-08-11

所有,css

CSS 冲突可以通过几种方法变得可预测：

使用更具体的选择器：
- 使用ID选择器（#myId）而不是类选择器（.myClass）。
- 对于相关元素，使用嵌套选择器（ul > li）而不是全局选择器（li）。
避免使用通用元素选择器（*）。
避免使用标签名选择器，如 h1 { color: blue; }，而是使用具体的类或ID选择器。
使用CSS预处理器（如Sass、LESS），可以提高CSS的可维护性和减少重复代码，从而减少冲突的可能性。
遵循BEM（Block Element Modifier）、OOCSS（Object-Oriented CSS）或其他CSS结构方法来组织CSS规则。
使用CSS-in-JS库（如styled-components），它们允许你用JavaScript编写样式，并且提供了强大的选择器作用域。
使用CSS模块化方法，如SUITCSS或ITCSS，这样可以把组件样式隔离开来，减少不同组件间的冲突。
使用CSS框架或类库，如Bootstrap、Tailwind CSS，它们提供了一套设计原则和规范，减少了自定义样式与框架样式的冲突。
使用CSS的!important规则，尽量少用或不用，除非确实需要覆盖其他样式。
使用CSS的specificity规则，通过增加选择器的复杂度来增加其优先级。

示例代码：




/* 不推荐 */
.button { color: blue; }
 
/* 推荐 */
#myButton { color: blue; }
 
/* 或者使用更具体的选择器 */
div#myContainer > .button { color: blue; }

以上方法可以帮助减少CSS冲突，使CSS更加可预测。

- 阅读更多 -

简洁高效的样式编写：揭秘Tailwind CSS

System

2024-08-11

所有,css




/* 使用Tailwind CSS创建一个简洁的按钮组件样式 */
/* 定义基础按钮样式 */
.btn {
    @apply px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md;
}
 
/* 定义按钮在悬停时的样式 */
.btn:hover {
    @apply bg-blue-700;
}
 
/* 定义按钮在禁用状态下的样式 */
.btn:disabled {
    @apply cursor-not-allowed bg-gray-500 opacity-50;
}

这个例子展示了如何使用Tailwind CSS的@apply特性来简化CSS代码，并提高样式的可维护性。通过这种方式，开发者可以通过改变一个类来影响所有应用了该类的元素，而不需要在多处重复相同的样式代码。

2024-08-11

在CSS中，可以使用::-webkit-scrollbar和相关伪元素来为滚动条设置样式，但请注意这些伪元素是非标准的，主要用于WebKit浏览器，不被所有浏览器支持。

以下是一个设置滚动条样式和滑块高度的例子：




/* 设置滚动条的宽度和背景颜色 */
::-webkit-scrollbar {
    width: 12px;
    background-color: #f9f9f9;
}
 
/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c1c1c1;
}
 
/* 设置滚动条滑块hover时的样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}
 
/* 设置滚动条滑块被按下时的样式 */
::-webkit-scrollbar-thumb:active {
    background-color: #919191;
}
 
/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 5px grey;
    background-color: #f0f0f0;
}

请注意，如果你需要跨浏览器兼容性，你可能需要使用第三方库或者JavaScript来设置滚动条样式。

- 阅读更多 -

CSS引入的三种方式

System

2024-08-11

所有,css

CSS的引入方式主要有以下三种：

内联样式：直接在HTML标签中使用style属性来设置样式。




<p style="color: blue;">这是一个蓝色的段落。</p>

内部样式表：在HTML文档的<head>部分，使用<style>标签来包含CSS代码。




<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>这是一个红色的段落。</p>
</body>

外部样式表：创建一个CSS文件（比如styles.css），然后在HTML文档的<head>部分，使用<link>标签来引入这个CSS文件。




<!-- 在<head>部分引入外部CSS文件 -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

styles.css 文件内容：




p {
  color: green;
}

HTML文件将显示为绿色的段落文本。

- 阅读更多 -

推荐几个css+js特效网站

System

2024-08-11

所有,css

CodePen: 这是一个设计师和开发者社区，你可以在上面找到各种创新的CSS和JS特效。
CSS Tricks: 虽然名为CSS Tricks，但它也有很多JS特效。
CSSWow: 提供大量的创新CSS动画效果。
Muzli: 一个专注于分享JavaScript和CSS动画的网站。
Magic CSS3 Animations: 提供大量的CSS3动画效果。
Animate.css: 一个用于创建动画的CSS库，非常受欢迎。
Hero Animations: 提供了很多创新的CSS动画效果。
CSS Loader: 提供各种创新的CSS加载器。
CSS Play: 提供了一些创新的CSS动画。
CSS GitHub Button: 提供了一些创新的CSS按钮。

这些网站都有很好的教程和实例代码，你可以直接使用或者参考其实现方式来创造自己的特效。

- 阅读更多 -

前端必会之二 css：层叠样式表

System

2024-08-11

所有,css

CSS（层叠样式表）是一种用来描述网页和其他HTML文件样式的语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS的引入方式：
- 内联样式：通过标签的style属性为其指定CSS样式。
- 内部样式表：在HTML文档的<head>标签中加入<style>标签，在其中编写CSS代码。
- 外部样式表：创建一个CSS文件，并通过HTML文档的<link>标签引入。
CSS的选择器：
- 标签选择器：直接使用HTML标签作为选择器。
- 类选择器：在HTML标签的class属性中设置一个名称，然后在CSS中以"."加上这个名称作为选择器。
- ID选择器：在HTML标签中设置一个id属性，然后在CSS中以"#"加上这个id作为选择器。
- 伪类选择器：用于向某些选择器添加特殊的效果，如:hover和:active。
CSS的特性：
- 层叠性：多个样式可以作用于同一个元素，样式会层叠。
- 继承性：一些CSS属性可以被子元素继承。
实例代码：




<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
        }
        .red {
            color: red;
        }
        #green {
            color: green;
        }
        p:hover {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>This is a paragraph.</p>
    <p class="red">This is a red paragraph.</p>
    <p id="green">This is a green paragraph.</p>
</body>
</html>

在这个例子中，首先定义了所有p标签的颜色为蓝色。然后定义了一个类red，将其应用于具有该类的元素，使其颜色变为红色。接着定义了一个id为green的元素，使其颜色变为绿色。最后，定义了一个伪类:hover，当鼠标悬停在段落上时，字体大小会变为20px。

- 阅读更多 -

CSS 设置背景图片

System

2024-08-11

所有,css

在CSS中，您可以使用background-image属性来设置元素的背景图片。以下是一个简单的例子，展示如何为一个div元素设置背景图片：




.div-with-background {
  background-image: url('path-to-your-image.jpg'); /* 设置背景图片 */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-position: center; /* 背景图片居中 */
  width: 300px; /* 元素宽度 */
  height: 200px; /* 元素高度 */
}

在HTML中，您可以这样使用这个类：




<div class="div-with-background"></div>

这段代码会创建一个宽300像素、高200像素的div，并在其中居中、不重复地铺设背景图片。

- 阅读更多 -