分类 css 下的文章

2024-08-10




/* 基本样式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
}
 
/* 导航栏样式 */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
 
nav li {
    float: left;
}
 
nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
nav li a:hover {
    background-color: #111;
}
 
/* 登录表单样式 */
.login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}
 
.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
}
 
.login-container input[type="text"],
.login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}
 
.login-container input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
 
.login-container input[type="submit"]:hover {
    background-color: #4cae4c;
}

这段代码为导航栏和登录表单定义了基本样式，使得页面更加美观和易用。通过使用CSS，我们可以将样式和内容分离，提高了代码的可维护性和可读性。

- 阅读更多 -

使用Windi CSS（基于vue-cli）

System

2024-08-10

所有,css

要在Vue项目中使用Windi CSS，你需要先安装Windi CSS依赖，并配置Vue项目以使用它。以下是步骤和示例代码：

安装Windi CSS依赖：




npm install windicss windicss-webpack-plugin -D

在Vue项目中配置Windi CSS。你可以在vue.config.js文件中添加配置：




const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')
 
module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 使用 Windi CSS 的 opt-in 功能
        loaderOptions: {
          customize: require.resolve('windicss/utils/customize'),
        },
      },
    },
  },
  configureWebpack: {
    plugins: [
      new WindiCSSWebpackPlugin({
        virtualModulePath: '~windi.css',
      }),
    ],
  },
}

在main.js或App.vue中引入生成的虚拟CSS文件：




import '~windi.css'
 
// 你的Vue实例代码
new Vue({
  render: h => h(App),
}).$mount('#app')

现在，Windi CSS 应该已经配置好并在你的Vue项目中使用了。你可以开始使用Windi CSS的实用性属性来编写你的样式，而不需要预定义的类。

- 阅读更多 -

CSS 中的外边距折叠及 BFC

System

2024-08-10

所有,css

外边距折叠（Margin Collapsing）是CSS布局中的一个常见现象。它指的是当两个垂直相接的块级元素之间的外边距相遇时，它们会合并成一个外边距，大小为两者中的较大者，而不是相加。

BFC（Block Formatting Context）是CSS布局中的一个概念，它是一个独立的渲染区域，内部的元素布局不会影响到外部的元素。

为了解决外边距折叠问题，可以通过创建BFC来隔离元素的布局环境。一个常见的方法是设置元素的overflow属性为auto、scroll或hidden。

例如：




/* 创建BFC的CSS规则 */
.bfc-container {
  overflow: auto; /* 或者使用 'scroll' 或 'hidden' */
}




<!-- 使用BFC隔离外边距 -->
<div class="bfc-container">
  <div style="margin: 10px 0;">Block 1</div>
  <div style="margin: 20px 0; overflow: hidden;">Block 2</div>
</div>

在这个例子中，Block 1和Block 2之间的外边距不会折叠，因为Block 2被包裹在一个创建了BFC的容器内。

- 阅读更多 -

使用CSS引用外部TTF字体

System

2024-08-10

所有,css

在CSS中，要使用外部的TTF（TrueType Font）字体，你需要先通过@font-face规则声明字体源，然后就可以在页面中通过font-family属性使用该字体。以下是一个简单的示例：

首先，确保你的TTF字体文件放置在服务器的可访问目录下。
创建一个CSS文件，并使用@font-face规则引入字体。




@font-face {
  font-family: 'MyCustomFont';
  src: url('https://www.yourserver.com/fonts/mycustomfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
 
body {
  font-family: 'MyCustomFont', Arial, sans-serif;
}

在HTML文件中链接这个CSS文件：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom Font Example</title>
  <link rel="stylesheet" href="path/to/your/stylesheet.css">
</head>
<body>
  <p>This text will use the custom font if it is available.</p>
</body>
</html>

确保替换https://www.yourserver.com/fonts/mycustomfont.ttf为你的字体文件实际的URL路径。这样，当页面加载时，字体将被下载并使用在包含font-family: 'MyCustomFont'的任何元素上。

- 阅读更多 -

CSS---flex布局

System

2024-08-10

所有,css

CSS的Flexbox（弹性盒子）布局提供了一种更灵活的方式来对容器内的项目进行排列、对齐和分配空间。

以下是一些基本的Flex布局样式和它们的作用：

display: flex; - 这个属性会把一个容器指定为flex布局。其中的子元素（项目）会被视为flex项。
flex-direction - 这个属性指定了flex项的方向。可以有四个值：row, row-reverse, column, column-reverse。
justify-content - 这个属性用来控制flex项在主轴方向上的对齐方式。可以有五个值：flex-start, flex-end, center, space-between, space-around。
align-items - 这个属性用来控制flex项在交叉轴方向上的对齐方式。可以有五个值：flex-start, flex-end, center, stretch, baseline。
flex-wrap - 这个属性用来控制flex项在一条轴线上不能全部排列时，是否换行以及换行的方式。可以有三个值：nowrap, wrap, wrap-reverse。
flex-flow - 这是flex-direction和flex-wrap的简写，默认值为row nowrap。

实例代码：




.container {
  display: flex; /* 使用flex布局 */
  flex-direction: row; /* 主轴方向为水平 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 如果项太多无法一行显示则换行 */
}
 
.item {
  flex: 1; /* 所有项目平分空间 */
  /* 或者指定flex项占用的空间比例 */
  /* flex: 2; 占据两倍的空间 */
}




<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

以上代码会创建一个水平居中、垂直居中并且可以换行的flex容器，其中的.item会平分容器的空间。

- 阅读更多 -

CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效

System

2024-08-10

所有,css

以下是一个使用纯CSS实现的炫酷多彩按钮特效的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Buttons</title>
<style>
  .button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
  }
 
  .button span {
    position: absolute;
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 50%);
    animation: animateGradient 2s linear infinite;
    transition: all 0.5s;
  }
 
  .button:hover {
    background-color: #556270;
  }
 
  .button:hover span {
    width: 100%;
  }
 
  @keyframes animateGradient {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
</style>
</head>
<body>
 
<button class="button"><span>Click Me</span></button>
 
</body>
</html>

这段代码展示了如何使用CSS创建一个带有炫酷渐变动画的按钮。当鼠标悬停在按钮上时，按钮背景色会变暗，同时内部的span元素会展开，产生一种光晕的视觉效果。这个示例也展示了CSS动画和CSS过渡的应用，以及如何通过HTML结构的简单修改来增加视觉效果。

- 阅读更多 -

使用Sass编写动态星空效果（css工程化的宏观认识）

System

2024-08-10

所有,css




// 定义一个宏，用于生成星星元素
@mixin star-generator($count: 1) {
  $star-size: 100px;
  $star-color: white;
  $star-position-range: 1000px;
 
  @for $i from 1 through $count {
    $random-size: random_range($star-size) ;
    $random-position-x: random_range($star-position-range) ;
    $random-position-y: random_range($star-position-range) ;
    $random-rotation: random_range(360deg);
    $random-scale: random_range(0.5, 1);
 
    .star-#{$i} {
      width: $random-size;
      height: $random-size;
      position: absolute;
      top: $random-position-x;
      left: $random-position-y;
      transform: rotate($random-rotation) scale($random-scale);
      background: $star-color;
      border-radius: 50%;
    }
  }
}
 
// 定义一个函数，用于生成指定范围内的随机数
@function random_range($max) {
  @return random(ceil($max));
}
 
// 使用宏生成10个星星元素
@include star-generator(10);

这段代码定义了一个Sass宏star-generator，它接受一个参数$count，表示要生成的星星数量。在宏的内部，使用了循环和随机函数来为每个星星生成随机的尺寸、位置、旋转角度和缩放比例。然后，它会根据这些随机属性生成相应的星星元素的CSS规则。最后，调用宏生成10个星星元素。这个例子展示了如何使用Sass的循环、随机函数和宏来创建复杂的动态样式。

- 阅读更多 -

CSS新增文本描边-text-stroke属性

System

2024-08-10

所有,css

CSS中的-webkit-text-stroke属性用于设置文本的描边粗细和颜色。该属性是非标准属性，主要用于WebKit内核的浏览器，如Chrome、Safari。

语法：




-webkit-text-stroke: <length> <color>;

其中，<length>表示描边的宽度，<color>表示描边的颜色。

解决方案：




.stroke-text {
  /* 设置文本描边为2px宽，颜色为红色 */
  -webkit-text-stroke: 2px red;
  /* 兼容性写法，为了其他内核的浏览器提供备选方案 */
  text-shadow: 
    0 0 1px red, /* 水平方向 */
    0 0 1px red, /* 垂直方向 */
    0 0 1px red; /* 对角方向 */
}

实例代码：




<!DOCTYPE html>
<html>
<head>
<style>
.stroke-text {
  -webkit-text-stroke: 1px black; /* Chrome, Safari */
  text-shadow: 
    0 0 1px black, /* 水平方向 */
    0 0 1px black, /* 垂直方向 */
    0 0 1px black; /* 对角方向 */
  font-size: 40px;
  color: white;
}
</style>
</head>
<body>
 
<h1 class="stroke-text">描边文字</h1>
 
</body>
</html>

在上述代码中，-webkit-text-stroke属性为文本设置了1像素宽的黑色描边，而为了提供其他浏览器兼容性，使用了text-shadow属性作为备选方案。在实际使用中，应该根据目标用户群的浏览器分布来决定是否需要添加备选的text-shadow样式。

- 阅读更多 -

#Css篇：flex布局的总结容器和项目

System

2024-08-10

所有,css




/* 设置flex布局 */
.container {
  display: flex; /* 使用flex布局 */
  flex-direction: row; /* 主轴方向为水平方向 */
  flex-wrap: wrap; /* 如果项目太多无法一行显示时，自动换行 */
  justify-content: flex-start; /* 项目在主轴上对齐方式为从头开始 */
  align-items: flex-start; /* 项目在交叉轴上的对齐方式为从头开始 */
  align-content: flex-start; /* 当有多根主轴线时，交叉轴上的对齐方式为从头开始 */
}
 
/* 设置flex项目 */
.item {
  flex: 1; /* 项目会占据等分的空间 */
  margin: 5px; /* 项目之间的间距 */
  min-width: 100px; /* 最小宽度为100px */
}

这段代码为一个flex容器（.container）和其中的项目（.item）设置了基本的样式。它展示了如何使用flexbox布局创建一个灵活的布局，其中的项目可以根据容器的大小自动换行并有间隔。

- 阅读更多 -

【已解决】Vue全局引入scss 个别页面不生效 / 不自动引入全局样式

System

2024-08-10

所有,css

问题解释：

在Vue项目中，当你尝试全局引入一个SCSS文件时，发现个别页面不生效，或者不自动引入全局样式。这通常是因为配置问题或者是引入方式不正确。

解决方法：

确保你已经在vue.config.js文件中正确配置了SCSS的全局引入。例如：




module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  }
};

这里@/styles/global.scss是全局样式文件的路径。

确保你在组件中正确地引入了SCSS文件。例如：




<style lang="scss">
@import "@/styles/global.scss";
/* 其他样式 */
</style>

如果你使用的是Vue CLI创建的项目，请确保vue.config.js在项目根目录中，并且已经正确配置了webpack的loader。
清除项目中的缓存，并重新运行项目，确保最新的配置被应用。
如果以上方法都不能解决问题，检查是否有其他配置或者插件覆盖了全局样式的引入。

确保遵循Vue官方推荐的项目结构和配置方式，通常可以解决大部分的样式引入问题。

- 阅读更多 -