1. 首页
  2. 分类
  3. css
css中cursor有多少值
System
2024-08-13
所有,css

CSS 的 cursor 属性可以有多个值，用于定义鼠标指针放置在元素上时的外观。以下是一些常用的 cursor 值：

  • default：默认光标（通常是一个箭头）
  • none：没有指针，通常用于隐藏光标
  • context-menu：右键菜单光标
  • pointer：指针（通常用于链接）
  • wait：等待光标，通常是一个沙漏或圆形加载符号
  • help：帮助光标，通常是一个问号符号
  • crosshair：十字箭头光标
  • progress：已被废弃，效果与 wait 相同
  • vertical-text：垂直文字光标，通常用于可编辑的文本
  • n-resize：向北的箭头光标
  • e-resize：向东的箭头光标
  • s-resize：向南的箭头光标
  • w-resize：向西的箭头光标
  • ne-resize：向北东的对角箭头光标
  • nw-resize：向北西的对角箭头光标
  • se-resize：向南东的对角箭头光标
  • sw-resize：向南西的对角箭头光标
  • auto：自动光标，浏览器设置的默认指针样式
  • inherit：继承父元素的光标样式

实例代码：




/* 将光标设置为指针 */
.link {
  cursor: pointer;
}
 
/* 将光标设置为等待 */
.loading {
  cursor: wait;
}
 
/* 将光标设置为不可见 */
.hidden-cursor {
  cursor: none;
}

HTML 使用：




<a href="#" class="link">链接</a>
<div class="loading">加载中...</div>
<div class="hidden-cursor">无法点击</div>
- 阅读更多 -
CSS 文字超出显示滚动条
System
2024-08-13
所有,css

要在CSS中实现文字超出时显示滚动条，可以使用overflow属性配合white-space和text-overflow属性。以下是实现这种效果的CSS代码示例：




.scrollable-text {
  width: 200px; /* 设置容器宽度 */
  height: 100px; /* 设置容器高度 */
  overflow: auto; /* 当内容超出容器尺寸时显示滚动条 */
  white-space: nowrap; /* 确保文本不会换行 */
  text-overflow: ellipsis; /* 当文本超出容器宽度时显示省略号 */
}

接下来，将这个类应用到你的HTML元素上：




<div class="scrollable-text">
  这里是很长的文字内容，当内容超出容器宽度时，会显示滚动条而不是换行。
</div>

这样，当内容超出.scrollable-text类定义的容器尺寸时，就会在必要的时候显示滚动条。

- 阅读更多 -
CSS 实现平均分布，自适应换行，不限数量
System
2024-08-13
所有,css

要实现一个在CSS中的平均分布、自适应换行、不限制数量的布局，可以使用Flexbox布局。以下是一个简单的例子，演示了如何使用Flexbox来实现这样的布局：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Average Distribution</title>
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
  }
  .item {
    flex: 1;
    margin: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
</style>
</head>
<body>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- ... 更多的.item元素 -->
</div>
</body>
</html>

在这个例子中，.container 是一个使用Flexbox布局的容器，其 flex-wrap: wrap; 属性确保当项目无法在一行内显示时，它们会自动换行。.item 是容器中的子元素，它们通过 flex: 1; 平等地分配可用空间，justify-content: space-around; 确保子元素在水平方向上均匀分布，即使在第一行也是如此。

这个布局适用于所有现代浏览器，并且能够适应不同的屏幕和窗口大小。子元素.item可以自由地增加或减少，Flexbox 会相应地调整它们的大小和数量。

- 阅读更多 -
【CSS小例】赛博朋克-按钮动画
System
2024-08-13
所有,css

以下是一个简化的例子，展示了如何使用CSS创建一个简单的赛博朋克风格的按钮动画效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reboot Neumorphic Button Animation</title>
<style>
  .button {
    /* 基础样式 */
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    background-color: #2f3238;
    color: #fafafa;
    text-decoration: none;
    border-radius: 4px;
    transition: transform 0.1s, box-shadow 0.1s; /* 动画过渡效果 */
  }
 
  .button:hover {
    /* 鼠标悬停样式 */
    transform: translateY(-5px); /* 悬停时向上移动 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  }
</style>
</head>
<body>
 
<a href="#" class="button">Hover Over Me!</a>
 
</body>
</html>

这段代码展示了一个简单的赛博朋克风格的按钮，当鼠标悬停在按钮上时，会有轻微的上移和阴影效果。这种效果在现代网页设计中常常用来增强交互体验。

- 阅读更多 -
css块元素，行内元素，行内块元素详解
System
2024-08-13
所有,css

块元素(block element)：

  1. 独占一行，表现为另起一行开始，一直到换行结束。
  2. 可以设置宽度、高度、外边距(margin)和内边距(padding)。
  3. 常见块元素有：<h1>, <p>, <div>, <ul>, <table>等。

行内元素(inline element)：

  1. 和其他元素在同一行上，不会另起一行。
  2. 不能直接设置宽度、高度、外边距(margin)和内边距(padding)，它的大小由内容撑开。
  3. 常见行内元素有：<span>, <a>, <img>, <input>等。

行内块元素(inline-block element)：

  1. 和其他元素在同一行上，表现为另起一行开始，一直到换行结束。
  2. 可以设置宽度、高度、外边距(margin)和内边距(padding)。
  3. 常见行内块元素有：<img>, <input>, <td>等。
- 阅读更多 -
CSS的2D、3D、浏览器私有前缀
System
2024-08-13
所有,css

CSS的2D和3D转换、动画以及过渡效果通常需要浏览器特定的“前缀”，以确保在不同浏览器上的兼容性。这些前缀包括但不限于以下几种：

  • 对于2D转换，你可能会用到 transform 属性，这时候的前缀是 -webkit-transform、-moz-transform、-o-transform 等。
  • 对于3D转换，除了2D转换的前缀，还需要额外的 -webkit-transform-style 和 -webkit-perspective 属性。
  • 对于动画，animation 和 transition 属性都需要前缀。

以下是一个简单的示例，展示了如何为CSS的2D转换添加浏览器私有前缀：




/* 标准语法 */
.box {
  transform: rotate(45deg);
  /* 其他样式 */
}
 
/* 浏览器私有前缀 */
.box {
  -webkit-transform: rotate(45deg); /* Chrome, Safari, 新版 Edge */
  -moz-transform: rotate(45deg);    /* Firefox */
  -ms-transform: rotate(45deg);     /* 旧版 IE */
  -o-transform: rotate(45deg);      /* 旧版 Opera */
  /* 其他样式 */
}

对于3D转换，你还需要添加 transform-style: preserve-3d; 和 perspective: 1000px; 等样式：




/* 标准语法 */
.stage {
  transform-style: preserve-3d;
  perspective: 1000px;
  /* 其他样式 */
}
 
/* 浏览器私有前缀 */
.stage {
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  /* 其他样式 */
}

对于CSS动画，你需要添加如 animation 和 transition 的前缀：




/* 标准语法 */
.box {
  animation: slide-in 1s ease-in-out forwards;
  /* 其他样式 */
}
 
/* 浏览器私有前缀 */
.box {
  -webkit-animation: slide-in 1s ease-in-out forwards;
  -moz-animation: slide-in 1s ease-in-out forwards;
  -ms-animation: slide-in 1s ease-in-out forwards;
  -o-animation: slide-in 1s ease-in-out forwards;
  /* 其他样式 */
}

现代浏览器通常不再需要特定的私有前缀，但为了确保广泛的兼容性，你可能需要在某些旧版本的浏览器中包含这些前缀。自动添加这些前缀的工具和构建工具（如 Gulp、Webpack 和 Sass/LESS 预处理器）能够帮助简化这个过程。

- 阅读更多 -
【Webpack5笔记】处理打包各种资源（css资源、less资源、图片资源、字体图标
System
2024-08-13
所有,css



const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin(),
    ],
    cleanStaleWebpackAssets: true,
  },
};

这个配置文件展示了如何使用Webpack 5来处理各种资源，包括CSS、LESS、图片和字体文件。它使用了mini-css-extract-plugin插件来提取CSS，并通过css-loader和less-loader来处理LESS文件。图片和字体文件被处理成Webpack资产，并在优化阶段被清理。

- 阅读更多 -
在CSS中，当文本内容长度超过某个指定宽度时，想要显示省略号（...）
System
2024-08-13
所有,css

在CSS中，可以使用text-overflow属性来实现当文本内容超出指定宽度时显示省略号。同时，需要设置white-space属性为nowrap以防止文本自动换行，以及overflow属性为hidden以隐藏超出容器的文本。

下面是一个简单的例子：




.ellipsis {
  width: 200px; /* 指定宽度 */
  white-space: nowrap; /* 防止自动换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号 */
}



<div class="ellipsis">
  这是一段很长的文本内容，当超出指定宽度时，希望显示省略号。
</div>

在这个例子中，.ellipsis类应用于一个div元素，当内容超出200px宽度时，会在末尾显示省略号。

- 阅读更多 -
CSS transition（过渡效果）详解
System
2024-08-13
所有,css

CSS transition 属性用于设置一个属性的过渡效果。它可以让属性的变化在一定的时间内平滑地进行。

基本语法：




transition: property duration timing-function delay;
  • property：定义应用过渡效果的 CSS 属性名称。
  • duration：定义过渡效果花费的时间长度。
  • timing-function：定义过渡效果的速度曲线，默认为 "ease"。
  • delay：定义过渡效果何时开始，默认是 0，即立即开始。

示例代码：




div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-in-out;
}
 
div:hover {
  width: 200px;
}

在上述例子中，当鼠标悬停在 div 上时，它的宽度会在 1 秒内从 100px 平滑过渡到 200px，速度曲线为 "ease-in-out"。

- 阅读更多 -
5. Tailwind CSS 响应式设计的实现
System
2024-08-13
所有,css



/* 使用Tailwind CSS实现响应式布局 */
 
/* 基本的布局样式 */
.container {
  @apply max-w-screen-xl mx-auto;
}
 
/* 在不同屏幕尺寸下应用不同的container宽度比例 */
.container-md {
  @apply max-w-screen-md;
}
 
.container-lg {
  @apply max-w-screen-lg;
}
 
.container-xl {
  @apply max-w-screen-xl;
}
 
/* 使用Tailwind CSS的display和flex相关类来实现响应式的网格系统 */
.grid-container {
  @apply flex flex-wrap;
}
 
.grid-item {
  @apply w-full sm:flex-1 md:w-1/2 lg:w-1/3 xl:w-1/4;
}
 
/* 使用Tailwind CSS的screens函数和min-w-0和h-full类实现响应式内容填充 */
.responsive-content {
  @apply min-w-0 h-full;
  @screen sm {
    @apply mt-4;
  }
}
 
/* 使用Tailwind CSS的utilities实现响应式的边距和填充 */
.responsive-padding {
  @apply p-4 sm:p-6 lg:p-8 xl:p-10;
}
 
.responsive-margin {
  @apply mb-4 sm:mb-6 lg:mb-8 xl:mb-10;
}

这个例子展示了如何使用Tailwind CSS的实用工具类来创建一个响应式的布局。通过定义不同的容器类和网格选项，开发者可以根据屏幕尺寸来调整布局的宽度和列的数量。同时，使用Tailwind CSS的屏幕函数特性，可以在不同屏幕尺寸下应用不同的样式规则。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号