分类 css 下的文章

2024-08-13

CSS 选择器是用于选择页面中特定元素的规则。CSS 提供了多种选择器类型，包括基础的标签选择器、类选择器、ID 选择器等，还有更高级的属性选择器、伪类选择器和伪元素选择器。

以下是一些常用的 CSS 选择器类型及其简单示例：

标签选择器（Element Selector）：选择特定类型的所有元素。




p { color: blue; } /* 所有段落文本变蓝色 */

类选择器（Class Selector）：选择所有具有特定 class 名称的元素。




.my-class { background-color: yellow; } /* 所有 class 包含 "my-class" 的元素背景变黄色 */

ID 选择器（ID Selector）：选择具有特定 ID 的单个元素。




#my-id { color: red; } /* ID 为 "my-id" 的元素文本变红色 */

属性选择器（Attribute Selector）：选择包含特定属性或属性值的元素。




input[type="text"] { background-color: lightblue; } /* 所有文本输入框背景变浅蓝色 */

伪类选择器（Pseudo-class Selector）：选择特定状态的元素，如：链接的不同状态。




a:hover { color: red; } /* 鼠标悬停在链接上时文本变红色 */

伪元素选择器（Pseudo-element Selector）：选择元素的一部分内容。




p::first-letter { font-size: 200%; } /* 段落文本的首字母字体大小变为200% */

子选择器（Child Selector）：选择指定父元素的直接子元素。




ul > li { color: green; } /* 无序列表的直接子元素 <li> 文本变绿色 */

相邻选择器（Adjacent Sibling Selector）：选择紧跟在另一个元素后的元素，且两者有相同父元素。




h1 + p { margin-top: 0; } /* 紧跟在 <h1> 后的 <p> 段落的上边距设置为0 */

后代选择器（Descendant Selector）：选择指定父元素的后代（不仅限于子元素）。




div p { color: purple; } /* <div> 元素内的所有 <p> 段落文本变紫色 */

通配选择器（Universal Selector）：选择页面中的所有元素。




* { margin: 0; padding: 0; } /* 所有元素的外边距和内边距设置为0 */

群组选择器（Grouping Selector）：将选择器组合在一起，选择这些组合中的任意一个。




h1, h2, h3 { font-family: "Times New Roman", Times, serif; } /* 所有 <h1>、<h2> 和 <h3> 使用 "Times New Roman" 字体 */

伪元素选择器（::before 和 ::after）：用于向元素的内容前后添加内容或者样式。




p::before { content: ">> "; } /* 所有 <p> 段落文本前添加 ">> " */

伪类选择器（:link、:visited、:hover、:active 和 :focus）：用于选择不同

- 阅读更多 -

不要图片？CSS实现圆角边框渐变色+背景透明

System

2024-08-13

所有,css




.box {
  /* 设置边框宽度和颜色 */
  border: 2px solid #00FFFF;
 
  /* 设置圆角 */
  border-radius: 10px;
 
  /* 设置背景渐变色 */
  background: linear-gradient(to right, #FFC107, #FF5722);
 
  /* 设置透明度 */
  opacity: 0.8;
}

这段代码展示了如何使用CSS为元素添加圆角、边框、渐变背景色，并调整透明度。border-radius属性设置圆角的大小，border属性定义了边框的宽度和颜色，background属性用来创建一个从左到右的线性渐变色，而opacity属性用于调整元素的透明度。

- 阅读更多 -

CSS绘制圆弧

System

2024-08-13

所有,css

在CSS中，我们可以使用border-radius属性来创建圆弧，但这是创建完整圆形的半径。如果你想要创建一个圆弧，即一个圆形中的一部分，你需要使用一个元素，并使用transform属性来旋转它。

以下是一个示例，它创建了一个圆弧：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Draw Arc</title>
<style>
  .arc {
    width: 100px;
    height: 50px;
    background-color: #3498db;
    border-top-left-radius: 100px 25px;
    border-bottom-left-radius: 100px 25px;
    transform-origin: center right;
    transform: rotate(-90deg);
    position: relative;
    left: 100px;
  }
</style>
</head>
<body>
 
<div class="arc"></div>
 
</body>
</html>

在这个例子中，.arc 类创建了一个宽度为100px，高度为50px的矩形。我们使用border-top-left-radius和border-bottom-left-radius属性来创建一个圆弧的形状，这里的圆弧半径为100px和25px。然后我们使用transform-origin和transform属性将圆弧旋转-90度，从而形成一个弧形。

这只是一个简单的例子，你可以根据需要调整尺寸、颜色和旋转的角度来创建不同的圆弧。

System

2024-08-13

所有,css

可以使用CSS Grid网格布局或Flexible Box布局来实现一行三列的布局，并且可以换行。

Grid 网格布局示例：




.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列占用1/3空间 */
  grid-gap: 10px; /* 网格间隙 */
}
 
.item {
  background-color: #f0f0f0; /* 背景颜色 */
  border: 1px solid #ccc; /* 边框 */
  padding: 20px; /* 内边距 */
  text-align: center; /* 文本居中 */
}




<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 更多的.item元素会自动换行 -->
</div>

Flexible Box 弹性布局示例：




.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}
 
.item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
  flex: 0 0 33.3333%; /* 占据100%宽度的1/3 */
}




<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 更多的.item元素会自动换行 -->
</div>

这两种方法都可以实现一行三列的布局，并且当空间不足以放下第四个元素时能够自动换行。

- 阅读更多 -

CSS滤镜（Filter）全攻略

System

2024-08-13

所有,css

CSS滤镜(Filter)属性应用于元素，以实现包括模糊，对比度，亮度，饱和度以及彩色滤镜等图形效果。

以下是一些使用CSS滤镜的示例：

模糊效果(blur()):




img {
  filter: blur(5px);
}

亮度调整(brightness()):




img {
  filter: brightness(50%);
}

对比度调整(contrast()):




img {
  filter: contrast(200%);
}

灰度效果(grayscale()):




img {
  filter: grayscale(100%);
}

色调饱和度调整(hue-rotate()):




img {
  filter: hue-rotate(90deg);
}

反色(invert()):




img {
  filter: invert(100%);
}

Opacity调整(opacity()):




img {
  filter: opacity(50%);
}

sepia效果(sepia()):




img {
  filter: sepia(100%);
}

阴影效果(drop-shadow()):




img {
  filter: drop-shadow(16px 16px 20px red);
}

多个滤镜效果结合使用:




img {
  filter: contrast(175%) brightness(125%);
}

以上代码中，filter属性可以接受多个效果，它们以空格分隔。每个函数的具体参数和用法可以查阅对应的CSS规范。

注意：滤镜效果可能会导致性能问题，尤其是在大型或复杂的网页上使用时，因此在移动设备上应当特别注意性能优化。

- 阅读更多 -

css同时设置渐变色背景和背景图的方法

System

2024-08-13

所有,css

在CSS中，您可以使用线性渐变和图像作为背景，并使用CSS的background属性同时设置它们。这里是一个示例，它同时设置了线性渐变和背景图像：




.element {
  background: linear-gradient(to right, #ff7e5f, #feb47b), url('background-image.jpg');
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中 */
  background-blend-mode: multiply; /* 渐变色和图片混合模式，可以是不同的值，比如 'normal', 'multiply', 'screen' 等 */
}

在这个例子中，linear-gradient 创建了一个从左到右的渐变，渐变色从 #ff7e5f 到 #feb47b，而 url('background-image.jpg') 加载了一个背景图片。background-size 和 background-position 分别控制了背景图片的尺寸和位置。background-blend-mode 属性定义了渐变色和图片的混合模式，这里使用的是 'multiply'，这种模式会产生一种叠加效果。

- 阅读更多 -

CSS使用过渡动画实现展开折叠效果

System

2024-08-13

所有,css




/* 设置基础样式 */
.container {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  overflow: hidden;
  transition: height 0.5s ease-in-out;
}
 
/* 折叠状态 */
.container.collapsed {
  height: 0;
}
 
/* 展开状态 */
.container.expanded {
  height: 200px;
}
 
/* 触发折叠和展开的按钮 */
.toggle-button {
  cursor: pointer;
  padding: 5px;
  background-color: #ddd;
  border: 1px solid #ccc;
  text-align: center;
}

在这个例子中，.container 类定义了一个容器的基础样式，并且通过 transition 属性指定了当 height 变化时应用过渡效果。.container.collapsed 类用于在容器被折叠时设置 height 为 0，使得容器不可见。.container.expanded 类用于在容器被展开时设置 height 为 200px。.toggle-button 类定义了触发折叠和展开操作的按钮样式。

- 阅读更多 -

在CSS中如何寻找第一个元素、最后一个、偶数、奇数、第n个标签元素

System

2024-08-13

所有,css

在CSS中，你可以使用伪类选择器来选择特定的元素。以下是一些常用的选择器和对应的实例代码：

找到第一个元素：




p:first-child {
  color: red;
}

这段代码会将第一个元素的文字颜色设置为红色。

找到最后一个元素：




p:last-child {
  color: red;
}

这段代码会将最后一个元素的文字颜色设置为红色。

找到偶数位置的元素：




p:nth-child(even) {
  color: red;
}

这段代码会将位于偶数位置的元素的文字颜色设置为红色，索引从1开始。

找到奇数位置的元素：




p:nth-child(odd) {
  color: red;
}

这段代码会将位于奇数位置的元素的文字颜色设置为红色，索引从1开始。

找到第n个元素：




p:nth-child(n) {
  color: red;
}

这段代码会将所有位置正好是n的元素的文字颜色设置为红色，索引从1开始。

注意，:nth-child选择器是从1开始计数的，如果你想从0开始计数，可以使用:nth-of-type选择器。

例如，找到第一个元素的代码可以有多种实现方式，根据具体需求选择合适的方法。

- 阅读更多 -

CSS响应式设计

System

2024-08-13

所有,css

CSS响应式设计是一种方式，通过创建可以响应不同屏幕尺寸的网页，提高用户体验。以下是一个简单的响应式设计实例：




/* 全局样式 */
body {
  font-family: Arial, sans-serif;
}
 
/* 基本布局 */
.container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
 
/* 响应式媒体查询 */
@media (min-width: 768px) {
  .container {
    width: 750px; /* 固定宽度 */
    margin: 0 auto; /* 水平居中 */
  }
}
 
@media (min-width: 992px) {
  .container {
    width: 970px; /* 固定宽度 */
  }
}
 
@media (min-width: 1200px) {
  .container {
    width: 1170px; /* 固定宽度 */
  }
}

这个样式表定义了一个.container类，它可以在不同屏幕尺寸下有不同的表现。当屏幕宽度小于768像素时，.container保持100%宽度，屏幕宽度介于768像素和992像素之间时，.container宽度固定为750像素并水平居中，屏幕宽度大于或等于1200像素时，.container宽度固定为1170像素。这样的设计可以保证内容在不同设备上的可读性和易用性。

- 阅读更多 -

CSS变换

System

2024-08-13

所有,css

CSS变换（transform）是CSS中的一个属性，它允许你对元素进行变换，如旋转、缩放、移动、倾斜等。

解决方案：

2D旋转（rotate）：




.element {
  transform: rotate(45deg);
}

2D缩放（scale）：




.element {
  transform: scale(1.5, 1.5);
}

2D平移（translate）：




.element {
  transform: translate(50px, 100px);
}

2D倾斜（skew）：




.element {
  transform: skew(30deg, 20deg);
}

3D旋转（rotate）：




.element {
  transform: rotateX(45deg);
  transform: rotateY(45deg);
  transform: rotateZ(45deg);
}

3D缩放（scale）：




.element {
  transform: scale3d(1.5, 1.5, 1.5);
}

3D移动（translate）：




.element {
  transform: translate3d(50px, 100px, 30px);
}

动画（animation）：




@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.element {
  animation: rotate 2s infinite linear;
}

变换原点（transform-origin）：




.element {
  transform-origin: top left;
}

变换维持（transform-style）：




.parent {
  transform-style: preserve-3d;
}

以上是CSS变换的一些基本用法，可以根据实际需求进行组合和变化。

- 阅读更多 -