1. 首页
  2. 分类
  3. css
CSS 之 自定义属性（变量）
System
2024-08-23
所有,css

在CSS中，自定义属性（也被称为CSS变量）可以让你创建可以在整个文档中重复使用的动态值。这些变量可以用于存储颜色值、长度值、字体名称等。

自定义属性的使用方法如下：

  1. 定义自定义属性：在选择器中使用--前缀来定义自定义属性。
  2. 使用自定义属性：使用var()函数来使用自定义属性。

例如：




:root {
  --main-bg-color: coral;
  --main-text-color: #333;
  --main-font-size: 16px;
}
 
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: var(--main-font-size);
}
 
/* 使用自定义属性的例子 */
.button {
  background-color: var(--main-bg-color);
  border: 1px solid var(--main-text-color);
  padding: 10px var(--main-font-size);
}

在这个例子中，我们定义了三个自定义属性--main-bg-color、--main-text-color和--main-font-size。然后在body选择器和.button类中使用这些变量。这样，如果你想要更改颜色或字体大小，只需要改变自定义属性的值即可，所有使用这个变量的地方都会自动更新。

- 阅读更多 -
Vite+Vue3项目全局引入scss文件
System
2024-08-23
所有,css

在Vite+Vue 3项目中，要全局引入SCSS文件，你可以使用Vite提供的全局样式插件。以下是步骤和示例代码：

  1. 安装SCSS预处理器依赖：



npm install -D sass
  1. 在项目根目录下创建一个全局样式文件，比如styles/global.scss。
  2. 在vite.config.js配置文件中，使用css选项来指定全局样式文件，并确保scss选项设置为true。



// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  }
})
  1. 在global.scss文件中，写入你的全局样式规则。



// styles/global.scss
@import '~@/styles/abstracts/variables.scss';
@import '~@/styles/abstracts/mixins.scss';
 
body {
  font-family: 'Arial', sans-serif;
  color: map-get($colors, 'primary');
}
 
/* 其他全局样式 */

确保你的样式导入采用绝对路径的形式，以便Vite可以正确处理它们。

以上步骤将会使得global.scss中的样式在项目的每个组件中自动应用。

- 阅读更多 -
CSS如何设置字体加粗
System
2024-08-23
所有,css

在CSS中，设置字体加粗通常使用font-weight属性。font-weight的常用值有normal、bold、bolder以及lighter。数值也可以使用，如400相当于normal，而700相当于bold。

以下是一些示例代码：




/* 使用关键字 */
p {
  font-weight: bold;
}
 
/* 使用数值 */
strong {
  font-weight: 700;
}
 
/* 使用相对关键字 */
em {
  font-weight: bolder;
}

在HTML中使用：




<p>这段文字将显示为加粗。</p>
<strong>这段文字也会显示为加粗。</strong>
<em>这段文字将显示为更加粗。</em>

请注意，不是所有的字体都有7种不同的粗细（从100到900），所以如果指定了一个不支持的值，浏览器会尽力进行映射到最接近的有效值。

- 阅读更多 -
CSS全解析：从基础到实战，掌握每一个知识点
System
2024-08-23
所有,css

CSS是一种用于网页样式设计的语言，主要用于描述网页内容的布局、字体、颜色、背景和其它显示特性。CSS可以使用内联样式、内部样式表和外部样式表三种方式来应用。

  1. 内联样式：

    内联样式是直接在HTML元素的style属性中设置CSS样式。这只影响设置的标签。




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

  1. 内部样式表：

    内部样式表是在HTML文档的<head>标签中添加<style>标签，然后在其中设置CSS样式。




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

  1. 外部样式表：

    外部样式表是在单独的.css文件中设置样式，然后在HTML文档的<head>标签中通过<link>标签引用。




<!-- 在HTML文档中 -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>



/* 在styles.css文件中 */
p {
    color: green;
}

  1. CSS选择器：

    CSS选择器用于选择需要添加样式的元素。常见的选择器有标签选择器、类选择器、ID选择器和属性选择器等。




/* 标签选择器 */
p {
    color: orange;
}
 
/* 类选择器 */
.center {
    text-align: center;
}
 
/* ID选择器 */
#logo {
    width: 200px;
}
 
/* 属性选择器 */
input[type="text"] {
    background-color: yellow;
}

  1. CSS盒模型：

    CSS盒模型由content、padding、border和margin组成。




div {
    width: 300px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

  1. CSS布局：

    CSS布局可以通过多种方式实现，如浮动布局、定位布局和弹性布局。




/* 浮动布局 */
.float-left {
    float: left;
}
 
.float-right {
    float: right;
}
 
/* 定位布局 */
.relative-position {
    position: relative;
    top: 10px;
    left: 20px;
}
 
/* 弹性布局 */
.flex-container {
    display: flex;
}

  1. CSS特效：

    CSS可以用来实现各种视觉特效，如阴影、渐变、变换等。




/* 阴影特效 */
div {
    box-shadow: 5px 5px 10px grey;
}
 
/* 渐变特效 */
.gradient-background {
    background: linear-gradient(to right, red, yellow);
}
 
/* 变换特效 */
.rotate-30deg {
    transform: rotate(30deg);
}

  1. CSS媒体查询：

    CSS媒体查询可以根据不同的屏幕尺寸或设备应用不同的样式。




/* 屏幕宽度小于600px时 */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

  1. CSS优先级：

    当多个选择器应用于同一元素时，需要确定哪个选择器的样式会被

- 阅读更多 -
css实现图片边缘模糊效果
System
2024-08-23
所有,css

要在CSS中实现图片的边缘模糊效果，可以使用box-shadow属性来创建一个模糊效果，并使用inset关键字使得阴影在元素内部而不是外部。但是，box-shadow只能应用于盒模型元素，如果要应用于<img>标签，需要将其放入一个容器元素中，如<div>。

以下是实现图片边缘模糊效果的示例代码：

HTML:




<div class="blur-box">
    <img src="path/to/your/image.jpg" alt="模糊效果的图片">
</div>

CSS:




.blur-box {
    position: relative;
    width: 300px; /* 或者你需要的宽度 */
    height: 200px; /* 或者你需要的高度 */
    overflow: hidden;
}
 
.blur-box img {
    width: 100%;
    height: 100%;
    display: block;
}
 
.blur-box::after {
    content: '';
    position: absolute;
    top: -10px; /* 控制模糊范围 */
    right: -10px; /* 控制模糊范围 */
    bottom: -10px; /* 控制模糊范围 */
    left: -10px; /* 控制模糊范围 */
    background: inherit;
    filter: blur(15px); /* 控制模糊程度 */
}

在这个例子中，.blur-box::after伪元素创建了一个与容器相同大小的模糊遮罩，遮罩的尺寸通过调整top, right, bottom, left属性来控制，filter: blur(15px)则负责模糊效果的程度。这样，图片的边缘就会出现模糊效果。

- 阅读更多 -
CSS基础：margin属性4种值类型，4个写法规则详解
System
2024-08-23
所有,css

CSS的margin属性是一个简写属性，用于设置一个元素的所有外边距。margin属性可以接受1到4个值：

  1. 当只有一个值时：margin: 20px; 所有四个外边距都会设置为20px。
  2. 当有两个值时：margin: 10px 20px; 上下外边距设置为10px，左右外边距设置为20px。
  3. 当有三个值时：margin: 10px 20px 30px; 上外边距设置为10px，左右外边距设置为20px，下外边距设置为30px。
  4. 当有四个值时：margin: 10px 20px 30px 40px; 上外边距设置为10px，右外边距设置为20px，下外边距设置为30px，左外边距设置为40px。

CSS代码示例：




/* 所有外边距都是20px */
.element-1 {
  margin: 20px;
}
 
/* 上下外边距是10px，左右外边距是20px */
.element-2 {
  margin: 10px 20px;
}
 
/* 上外边距是10px，左右外边距是20px，下外边距是30px */
.element-3 {
  margin: 10px 20px 30px;
}
 
/* 上外边距是10px，右外边距是20px，下外边距是30px，左外边距是40px */
.element-4 {
  margin: 10px 20px 30px 40px;
}

以上代码分别展示了如何为元素设置不同数量的外边距值。在实际应用中，可以根据需要选择适当的规则来设置元素的外边距。

- 阅读更多 -
用css实现文字字体颜色渐变的三种方法
System
2024-08-23
所有,css

在CSS中，可以使用线性渐变(linear-gradient)来实现文字的颜色渐变效果。以下是三种实现文字渐变色的方法：

  1. 使用background-image属性：



.gradient-text {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  color: transparent;
}
  1. 使用background-clip属性：



.gradient-text {
  background-color: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  color: transparent;
}
  1. 使用mask-image属性：



.gradient-text {
  color: #ffffff;
  -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  -webkit-text-fill-color: transparent;
}

请注意，-webkit-前缀用于兼容不同浏览器的最新标准。这些方法在大部分现代浏览器中有效，但具体可用性请根据不同浏览器的版本和市场份额进行评估。

- 阅读更多 -
在vue2中使用tailwindcss（完整教程）
System
2024-08-23
所有,css

在Vue 2项目中使用Tailwind CSS需要几个步骤：

  1. 安装Tailwind CSS：



npm install -D tailwindcss postcss autoprefixer
  1. 使用Tailwind CSS创建配置文件：



npx tailwindcss init -p
  1. 在tailwind.config.js中配置Tailwind CSS（如果已经创建了配置文件，则可以直接编辑）：



// tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
  1. 在postcss.config.js中配置PostCSS（如果没有，则需要创建）：



// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
  1. 在Vue组件中引入Tailwind CSS：



<template>
  <div class="text-blue-700">Hello Tailwind!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style>
/* 在这里也可以使用Tailwind CSS */
</style>
  1. 在Vue单文件组件中使用Tailwind CSS提供的实用程序类。
  2. 在main.js或App.vue中引入Tailwind CSS：



import './assets/css/tailwind.css';

确保在package.json中的scripts部分包含正确的构建步骤：




"scripts": {
  "build": "vue-cli-service build",
  "serve": "vue-cli-service serve",
  "lint": "vue-cli-service lint",
  "postcss": "tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/tailwind.css"
}

现在，你应该能够在Vue 2项目中使用Tailwind CSS了。

- 阅读更多 -
HTML中的CSS超详细使用（附代码图文示例）【干货】
System
2024-08-23
所有,css

CSS (Cascading Style Sheets) 是用于描述网页样式的语言，可以控制网页的布局、颜色、字体等外观特性。以下是一些常用的CSS样式属性及其使用示例：

  1. 字体大小：



p {
  font-size: 16px;
}
  1. 文本颜色：



p {
  color: red;
}
  1. 背景颜色：



body {
  background-color: #f0f0f0;
}
  1. 边框：



div {
  border: 1px solid black;
}
  1. 内边距（padding）和外边距（margin）：



div {
  padding: 10px;
  margin: 15px;
}
  1. 浮动（float）：



img {
  float: left;
}
  1. 定位（position）：



div {
  position: relative;
  top: 5px;
  left: 10px;
}
  1. 不透明度：



div {
  opacity: 0.5;
}
  1. 阴影效果：



div {
  box-shadow: 5px 5px 10px #888888;
}
  1. 显示与隐藏：



div {
  display: none; /* 隐藏div */
}
 
div.show {
  display: block; /* 显示div */
}

这些只是CSS的冰山一角，实际上CSS可以做到更多，控制网页中的所有元素。通过组合使用各种CSS属性和规则，开发者可以创建出丰富多样的网页布局。

- 阅读更多 -
css - - - - - 环形倒计时进度条实现
System
2024-08-23
所有,css



/* 环形倒计时进度条样式 */
.circular-countdown {
  position: relative;
  width: 100px;
  height: 100px;
}
 
.circular-countdown .circle-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 100px, 0px); /* 剪切成上半圆形 */
  background: conic-gradient(#000 0%, #000 30%, transparent 30%); /* 创建一个由黑色到透明的圆锥渐变 */
  animation: rotate 2s linear infinite; /* 应用无限循环的旋转动画 */
}
 
.circular-countdown .circle-fill {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 100px, 0px); /* 剪切成上半圆形 */
  background: conic-gradient(#000 0%, #000 30%, transparent 30%); /* 创建一个由黑色到透明的圆锥渐变 */
  animation: rotate-fill 2s linear infinite; /* 应用无限循环的填充旋转动画 */
}
 
/* 旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
/* 填充旋转动画 */
@keyframes rotate-fill {
  from {
    transform: rotate(-360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

这个CSS样式定义了一个环形倒计时进度条，它通过clip属性将SVG元素剪切成上半圆形，并使用conic-gradient创建渐变效果。通过animation属性实现旋转动画，模拟倒计时的效果。这个实现方法展示了如何利用CSS的剪切和渐变特性创建复杂的视觉效果。

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