标签 css 下的文章

2024-08-23

在CSS中，我们可以使用边框（border）属性来绘制一个三角形。这是因为CSS的边框属性可以创建出宽度和颜色不同的线条，我们可以利用这个特性来创建一个看起来像是三角形的元素。

以下是几种不同的方法来绘制三角形：

使用单边边框（一般是上或下边）：




.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

使用两边边框（一般是左和右）：




.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid red;
}

使用一边边框和一个透明边框（可以是任何一边）：




.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

每种方法都利用了CSS的边框会相交于三角形顶点的特性。通过调整不同边框的大小和颜色，你可以创建出各种形状的三角形。

以上代码中的.triangle是你要应用这个三角形样式的HTML元素的类名。你可以根据需要将这个类名应用到任何你想要显示为三角形的元素上。

- 阅读更多 -

CSS中的border-radius: 打造圆润世界的秘密武器

System

2024-08-23

所有,css

CSS的border-radius属性是一种强大的工具，它允许你创建圆角矩形，这使得你可以创建出各种各样的圆形和椭圆形元素。这个属性可以接受不同的值，包括像素值、百分比和无单位的数值。

解决方案1：使用像素值创建圆角矩形。




.box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 25px;
}

解决方案2：使用百分比创建圆角矩形。




.box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 50%;
}

解决方案3：使用无单位的数值创建圆角矩形。




.box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 10; /* 这里的10相当于10px */
}

解决方案4：创建单边半径。




.box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  border-top-left-radius: 50px; /* 左上角半径 */
  border-bottom-right-radius: 50px; /* 右下角半径 */
}

解决方案5：创建椭圆形。




.box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 50%;
  aspect-ratio: 2 / 1; /* 宽高比为2:1 */
}

以上代码展示了如何使用border-radius属性创建不同的形状。这个属性是CSS中用于创建圆角矩形和其他形状的强大工具，值得开发者在创建网页和应用程序时深入学习和应用。

System

2024-08-23

所有,css

在CSS中，可以使用word-wrap和word-break属性来控制英文的自动换行行为。white-space和overflow属性则可以用来控制元素的空白字符处理和内容溢出的显示方式。

`word-wrap`（现代浏览器中通常使用`overflow-wrap`）

word-wrap: break-word; 允许在长单词或URL地址内部进行换行。

`word-break`

word-break: break-all; 允许在单词内部任意位置换行。
word-break: keep-all; 禁止在单词内部换行，适用于东亚语言。

`white-space`

white-space: normal; 忽略多余的空白符，自动换行。
white-space: nowrap; 忽略多余的空白符，不自动换行。

`overflow`

overflow: hidden; 隐藏溢出的内容。
overflow: scroll; 添加滚动条来查看所有内容。
overflow: auto; 根据需要自动添加滚动条。

实例代码




/* 使得英文在长单词或连字符处自动换行 */
.auto-wrap-long-words {
  word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
}
 
/* 使得英文在任意位置都可以换行 */
.break-anywhere {
  word-break: break-all;
}
 
/* 禁止换行，保留空白，适合东亚文字处理 */
.keep-white-space {
  white-space: keep-all;
}
 
/* 自动换行，隐藏溢出内容 */
.overflow-hidden {
  white-space: normal;
  overflow: hidden;
}
 
/* 自动换行，并在需要时显示滚动条 */
.scroll-if-needed {
  white-space: normal;
  overflow: auto;
}

在HTML中使用这些类：




<div class="auto-wrap-long-words">
  ThisIsAVeryLongWordThatNeedsToBeBrokenDownIntoMultipleLinesBecauseItDoesNotFitInTheContainer.
</div>
 
<div class="break-anywhere">
  ThisIsAVeryLongWordThatNeedsToBeBrokenDownIntoMultipleLinesBecauseItDoesNotFitInTheContainer.
</div>
 
<div class="keep-white-space">
  中文保持空白不换行，如果长度超出则使用word-wrap规则处理。
</div>
 
<div class="overflow-hidden">
  这是一段很长的文本，将会被隐藏，但是我们可以看到它确实在自动换行。
</div>
 
<div class="scroll-if-needed">
  这是一段很长的文本，它将在自动换行的同时，如果内容超出容器则显示滚动条。
</div>

- 阅读更多 -

如何用css实现两列布局?

System

2024-08-23

所有,css

CSS实现两列布局的方法有很多种，以下是几种常用的方法：

Flexbox布局




.container {
  display: flex;
}
 
.column1 {
  flex: 1; /* 或者指定flex比例 */
}
 
.column2 {
  flex: 1; /* 或者指定flex比例 */
}

Grid布局




.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
}

浮动布局




.column1 {
  float: left;
  width: 50%; /* 或者使用其他百分比 */
}
 
.column2 {
  float: right;
  width: 50%; /* 或者使用其他百分比 */
}

使用inline-block




.column1 {
  display: inline-block;
  width: 50%; /* 或者使用其他百分比 */
  vertical-align: top;
}
 
.column2 {
  display: inline-block;
  width: 50%; /* 或者使用其他百分比 */
  vertical-align: top;
}

使用绝对定位




.container {
  position: relative;
}
 
.column1 {
  position: absolute;
  width: 50%; /* 或者使用其他百分比 */
  left: 0;
}
 
.column2 {
  position: absolute;
  width: 50%; /* 或者使用其他百分比 */
  right: 0;
}

选择哪种布局方式取决于具体需求和兼容性要求。在实际开发中，Flexbox和Grid布局因其灵活性和现代浏览器的广泛支持而被广泛使用。

- 阅读更多 -

前端用HTML，CSS, JS 写一个简易的音乐播放器

System

2024-08-23

所有,css

以下是一个使用HTML、CSS和JavaScript创建的简易音乐播放器的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易音乐播放器</title>
<style>
  .music-player {
    width: 300px;
    margin: 20px auto;
    text-align: center;
  }
  .music-player button {
    padding: 5px 10px;
    margin: 5px;
    background: #6fa3ef;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .music-player button:hover {
    background: #4d81dc;
  }
  audio {
    width: 100%;
  }
</style>
</head>
<body>
<div class="music-player">
  <audio id="music" src="your-music-file.mp3" controls></audio>
  <button onclick="playMusic()">播放</button>
  <button onclick="pauseMusic()">暂停</button>
</div>
 
<script>
  function playMusic() {
    document.getElementById('music').play();
  }
 
  function pauseMusic() {
    document.getElementById('music').pause();
  }
</script>
</body>
</html>

在这个例子中，我们创建了一个包含播放和暂停按钮的音乐播放器。用户点击播放按钮时，音乐开始播放；点击暂停按钮时，音乐暂停。你需要将your-music-file.mp3替换为你的音乐文件路径。这个播放器使用了HTML5的<audio>元素以及JavaScript来控制播放和暂停。

- 阅读更多 -

vite + postcss-prefix-selector 增加统一作用域

System

2024-08-23

所有,css




// vite.config.js
import { defineConfig } from 'vite';
import postcssPrefixSelector from 'postcss-prefix-selector';
 
export default defineConfig({
  plugins: [
    // 自定义插件，用于给所有选择器添加统一的作用域
    (context) => {
      // 只在生产模式下添加前缀
      if (context.command === 'build') {
        return {
          async postcss(postcss) {
            // 使用postcssPrefixSelector插件，并传入前缀选项
            return postcss.use(postcssPrefixSelector({ prefix: '.app ' }));
          },
        };
      }
    },
  ],
});

这段代码演示了如何在Vite项目中使用postcss-prefix-selector插件来给所有CSS选择器添加统一的作用域（例如.app）。只在生产构建中添加前缀，以确保开发过程中不会受到影响。这是一个简化版本的实际使用示例，可以直接用于Vite项目中。

- 阅读更多 -

CSS--样式穿透

System

2024-08-23

所有,css

CSS样式穿透通常指在使用组件化框架时，父组件样式穿透到子组件内部。这通常是为了覆盖第三方库或特定子组件的默认样式。以下是一些常见的CSS框架中实现样式穿透的方法：

Vue.js 使用 >>> 操作符：




/* 父组件样式 */
.parent >>> .child {
  color: red;
}

Vue.js 使用 /deep/ 操作符：




/* 父组件样式 */
.parent /deep/ .child {
  color: red;
}

Angular 使用 ::ng-deep：




:host ::ng-deep .child {
  color: red;
}

React 使用 && 操作符：




.parent .child && {
  color: red;
}

全局使用 :root 选择器：




:root .child {
  color: red;
}

使用 !important 强制应用样式（不推荐，因为可能会导致样式维护问题）：




.parent .child {
  color: red !important;
}

请根据你所使用的特定框架选择合适的方法。

- 阅读更多 -

CSS 之自定义属性（变量）

System

2024-08-23

所有,css

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

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

定义自定义属性：在选择器中使用--前缀来定义自定义属性。
使用自定义属性：使用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提供的全局样式插件。以下是步骤和示例代码：

安装SCSS预处理器依赖：




npm install -D sass

在项目根目录下创建一个全局样式文件，比如styles/global.scss。
在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";`
      }
    }
  }
})

在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），所以如果指定了一个不支持的值，浏览器会尽力进行映射到最接近的有效值。

- 阅读更多 -

word-wrap（现代浏览器中通常使用overflow-wrap）

word-break

white-space

overflow

实例代码

`word-wrap`（现代浏览器中通常使用`overflow-wrap`）

`word-break`

`white-space`

`overflow`