分类 css 下的文章

2024-08-12

在CSS中，可以使用linear-gradient和伪元素来实现一个简单的时间线效果。以下是一个实现时间线的基本示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Line Example</title>
<style>
  .timeline {
    position: relative;
    padding: 20px 0;
    margin-top: 20px;
    color: #333;
  }
  .timeline:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 6px;
    height: 100%;
    background: #f0f0f0;
    border-radius: 4px;
  }
  .timeline-item {
    position: relative;
    margin-left: -17px;
    margin-right: 15px;
    padding-left: 65px;
    text-align: left;
  }
  .timeline-item:before,
  .timeline-item:after {
    content: '';
    position: absolute;
    top: 0;
  }
  .timeline-item:before {
    left: -13px;
    width: 20px;
    height: 100%;
    background: #f0f0f0;
    border-radius: 50%;
  }
  .timeline-item:after {
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #f0f0f0;
    border-radius: 50%;
    z-index: 10;
  }
</style>
</head>
<body>
<div class="timeline">
  <div class="timeline-item">
    <div>2023年1月1日</div>
    <div>新年之初，世界在回春。</div>
  </div>
  <div class="timeline-item">
    <div>2023年1月2日</div>
    <div>继续前行，面向未知。</div>
  </div>
  <!-- 更多时间线项... -->
</div>
</body>
</html>

这段代码会创建一个带有时间轴的简单时间线，每个时间轴项都有一个圆形的标记。您可以根据需要添加更多的.timeline-item来扩展时间线。

- 阅读更多 -

CSS笔记——background背景样式、圆角样式和渐变色样式

System

2024-08-12

所有,css




/* 背景样式 */
body {
  background-color: #FFF; /* 设置背景颜色 */
  background-image: url(images/bg_clouds.png); /* 设置背景图片 */
  background-repeat: repeat-x; /* 设置背景图片水平方向重复 */
  background-position: center top; /* 设置背景图片的位置 */
  background-attachment: fixed; /* 背景图片固定，不随页面滚动 */
}
 
/* 圆角样式 */
div.rounded {
  background-color: #FFF; /* 设置元素背景色 */
  border: 1px solid #555; /* 设置边框 */
  padding: 10px; /* 设置内边距 */
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari 和 Chrome */
  border-radius: 15px; /* 标准语法 */
}
 
/* 渐变背景色样式 */
div.gradient {
  background-color: #FFF; /* 设置元素背景色 */
  background-image: url(images/bg_gradient.png); /* 设置背景渐变图片 */
  background-repeat: repeat-x; /* 设置渐变背景水平方向重复 */
  padding: 10px; /* 设置内边距 */
}

这个代码实例展示了如何在CSS中设置背景样式、圆角样式和渐变背景色样式。使用了标准的CSS属性以及针对不同浏览器所需的特定前缀。这些样式可以应用于HTML文档中的任何元素，以增强页面的视觉效果。

- 阅读更多 -

threejs CSS2DRenderer(HTML元素作为标签)

System

2024-08-12

所有,css

CSS2DRenderer 是 Three.js 中用于将 HTML 元素作为标签附加到 3D 场景中的对象的一个工具。要使用 CSS2DRenderer 并将 HTML 元素作为标签，你需要首先创建一个 Three.js 场景，然后创建 CSS2DRenderer 实例并将其附加到Three.js 的场景中。

以下是一个简单的例子，展示如何使用 CSS2DRenderer 在 Three.js 场景中添加 HTML 元素作为标签：




import * as THREE from 'three';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
// 创建一个Three.js场景
const scene = new THREE.Scene();
 
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建CSS2DRenderer
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
document.body.appendChild(labelRenderer.domElement);
 
// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建HTML元素作为标签
const label = document.createElement('div');
label.style.color = 'red';
label.innerHTML = 'Hello, label!';
 
// 创建CSS2DObject
const labelObject = new CSS2DObject(label);
labelObject.position.set(0, 0, 0); // 设置标签位置
scene.add(labelObject);
 
camera.position.z = 5;
 
function animate() {
  requestAnimationFrame(animate);
 
  renderer.render(scene, camera);
  labelRenderer.render(scene, camera);
}
 
animate();

在这个例子中，我们首先创建了一个立方体，并且为它创建了一个 HTML 元素作为标签。然后，我们将这个标签作为 CSS2DObject 添加到了 Three.js 的场景中。最后，在动画循环中，我们分别使用 WebGLRenderer 和 CSS2DRenderer 来渲染场景。

这个例子提供了一个基本框架，你可以在其中添加更多的功能，比如对标签位置和样式的调整，或者添加更多的交互功能。

- 阅读更多 -

掌握前端开发：CSS基础指南

System

2024-08-12

所有,css

在CSS中，我们可以使用不同的属性来设置元素的样式，以下是一些常用的CSS属性：

字体属性：
- font-family：设置字体类型。
- font-size：设置字体大小。
- font-weight：设置字体粗细。
- font-style：设置字体风格（如斜体）。
文本属性：
- color：设置文本颜色。
- text-align：设置文本对齐方式。
- text-decoration：设置文本装饰（如下划线）。
- text-transform：设置文本大小写。
- letter-spacing：设置字符之间的间距。
- line-height：设置行高。
背景属性：
- background-color：设置背景颜色。
- background-image：设置背景图片。
- background-repeat：设置背景图片是否重复。
- background-position：设置背景图片的位置。
- background-size：设置背景图片的大小。
边框属性：
- border：设置边框的宽度、样式和颜色。
- border-radius：设置边框圆角。
盒模型属性：
- margin：设置外边距。
- padding：设置内边距。
- width：设置元素的宽度。
- height：设置元素的高度。
- box-shadow：设置盒子阴影。
布局属性：
- display：设置元素的显示类型（如块级或内联）。
- position：设置元素的定位方式（静态、相对、绝对或固定）。
- top、right、bottom、left：设置元素的定位偏移。
- overflow：设置元素的溢出内容如何处理。

以下是一个简单的CSS样式表示例，应用于HTML中的一个段落元素：




p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  text-align: center;
  background-color: #f0f0f0;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 10px;
  margin: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这段代码将应用于HTML中的<p>元素，设置其字体、大小、颜色、对齐方式、背景、边框、圆角、内边距、外边距和盒子阴影。

System

2024-08-12

所有,css

以下是一个使用Vite、React 18、Eslint、Stylelint、Tailwind CSS和Ant Design的前端项目的基本配置示例：

初始化项目：




npm create vite@latest my-app --template react-ts
cd my-app

安装依赖：




npm install

安装Tailwind CSS：




npx tailwindcss init -p

安装Ant Design：




npm install antd

安装lint依赖：




npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks postcss autoprefixer --save-dev
npm install stylelint stylelint-config-standard stylelint-config-recommended stylelint-processor-styled-components stylelint-scss --save-dev

创建.eslintrc.js，配置Eslint：




module.exports = {
  extends: [
    'airbnb',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:import/typescript',
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['react', '@typescript-eslint', 'import', 'jsx-a11y', 'react-hooks'],
  rules: {
    // 自定义规则
  },
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
};

创建.stylelintrc.json，配置Stylelint：




{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recommended-scss"
  ],
  "rules": {
    // 自定义规则
  }
}

在vite.config.ts中配置Tailwind CSS：




import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
// 引入tailwindcss
import tailwindcss from 'tailwindcss';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss],
    },
  },
});

在index.css或其他Tailwind CSS配置文件中引入Tailwind CSS：




@tailwind base;
@tailwind components;
@tailwind utilities;

在tsconfig.json中配置对应的lint规则：




{
  "compilerOptions": {
    // ...
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/styles/**/*.scss"],
  "exclude": ["node_modules"],
  "lint": {
    "options": {
      "configFile": "./path/to/your/eslintrc.js",
      "format": "stylish

- 阅读更多 -

使用CSS计算高度铺满屏幕

System

2024-08-12

所有,css

要使元素的高度铺满整个屏幕，可以使用 vh（viewport height）单位。100vh 等于整个视口的高度。将元素的高度设置为 100vh 就可以实现。

CSS 示例代码：




.full-screen {
  height: 100vh; /* 高度铺满整个屏幕 */
}

HTML 示例代码：




<div class="full-screen">
  这个元素的高度将会铺满整个屏幕。
</div>

- 阅读更多 -

Vue3整合Tailwindcss之padding样式类

System

2024-08-12

所有,css




<template>
  <div class="bg-white shadow-md rounded px-4 py-6 md:flex md:items-center md:justify-between">
    <div class="flex-1">
      <p class="text-sm leading-5 text-gray-600">
        This is a toast message.
      </p>
    </div>
    <div class="flex-shrink-0 mt-4 md:mt-0">
      <div class="inline-flex text-gray-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style scoped>
/* 这里可以添加更多的样式，如果需要 */
</style>

这个代码实例展示了如何在Vue 3项目中使用Tailwind CSS来创建一个带有图标的提示框组件。它使用了Tailwind的实用程序类来设置背景、边框、颜色、填充和图标。通过scoped属性，样式仅应用于当前组件，不会影响其他组件或页面的样式。

System

2024-08-12

所有,css

在Vue2或Vue3项目中使用postcss-to-px-viewport插件实现自适应屏幕大小，你需要按照以下步骤操作：

安装postcss-to-px-viewport：




npm install postcss-to-px-viewport --save-dev

在postcss.config.js（或你的PostCSS配置文件）中配置插件：




// postcss.config.js
module.exports = {
  plugins: {
    'postcss-to-px-viewport': {
      unitToConvert: 'px', // 要转换的单位
      viewportWidth: 375, // 设计稿宽度
      unitPrecision: 6, // 单位转换后保留的精度
      propList: ['*'], // 指定转换那些属性，*表示全部
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 指定不转换那些选择器
      minPixelValue: 1, // 最小的转换数值
      mediaQuery: false, // 是否在媒体查询中也转换px
      replace: true, // 是否直接更换属性值
      exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或者某些特定文件
    }
  }
};

确保你的Vue项目构建配置（如webpack配置）已正确设置以使用PostCSS。
重新运行你的Vue项目，现在postcss-to-px-viewport插件将会在构建过程中将CSS中的像素单位转换为视口单位。

请注意，具体的配置可能会根据你的项目需求和PostCSS的版本有所不同，你可能需要根据postcss-to-px-viewport插件的文档进行调整。

- 阅读更多 -

CSS 水平垂直居中的方式

System

2024-08-12

所有,css

CSS实现元素的水平垂直居中有多种方法，以下是几种常用的方法：

使用Flexbox布局:




.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.child {
  /* 子元素内容 */
}

使用Grid布局:




.parent {
  display: grid;
  place-items: center;
}
 
.child {
  /* 子元素内容 */
}

使用绝对定位和transform:




.parent {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用绝对定位和margin:




.parent {
  position: relative;
}
 
.child {
  position: absolute;
  width: 50%;  /* 或者具体的宽度 */
  height: 50%; /* 或者具体的高度 */
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

这些方法可以根据不同的布局需求选择使用。

- 阅读更多 -

CSS中如何设置单行或多行内容超出后，显示省略号

System

2024-08-12

所有,css

在CSS中，可以使用以下属性来设置单行或多行内容超出后显示省略号：

对于单行文本，使用text-overflow: ellipsis;属性。
对于多行文本，可以使用-webkit-line-clamp属性结合display: -webkit-box;和-webkit-box-orient: vertical;。

以下是单行和多行文本超出显示省略号的CSS样式示例：

单行文本：




.single-line-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

多行文本：




.multi-line-ellipsis {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3; /* 限制在三行内 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

注意：-webkit-line-clamp属性是非标准属性，但是在大多数现代浏览器中得到了支持。这意味着该方法主要适用于使用Webkit内核的浏览器，如Chrome、Safari等。

- 阅读更多 -