分类 css 下的文章

2024-08-10

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官方推荐的项目结构和配置方式，通常可以解决大部分的样式引入问题。

- 阅读更多 -

HTML5 和 CSS 响应式 Web 设计

System

2024-08-10

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局示例</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
        .navigation {
            line-height: 30px;
            background-color: #dddddd;
            height: 300px;
            width: 100%;
        }
        .section {
            width: 100%;
            float: left;
            padding: 15px;
            color: white;
        }
        .footer {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
            clear: both;
        }
        /* 媒体查询：当屏幕宽度小于600px时 */
        @media screen and (max-width: 600px) {
            .navigation {
                height: auto;
            }
            .section {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
 
<div class="header">
    <h1>响应式布局示例</h1>
</div>
 
<div class="navigation">
    <p>导航栏</p>
    <p>这里是导航内容...</p>
</div>
 
<div class="section" style="background-color: #ff6666;">
    <h2>节</h2>
    <p>这里是节的内容...</p>
</div>
 
<div class="section" style="background-color: #87ceeb;">
    <h2>节</h2>
    <p>这里是节的内容...</p>
</div>
 
<div class="section" style="background-color: #da70d6;">
    <h2>节</h2>
    <p>这里是节的内容...</p>
</div>
 
<div class="footer">
    <p>底部信息</p>
    <p>版权所有 &copy; 2023</p>
</div>
 
</body>
</html>

这个示例展示了如何使用CSS媒体查询来创建一个简单的响应式布局。当屏幕宽度小于600px时，导航栏的高度会自动调整，以及其他一些元素的样式会相应地改变以适应小屏幕设备。

- 阅读更多 -

CSS 文本样式包括单个文字样式、段落样式

System

2024-08-10

所有,css

在CSS中，可以使用各种属性来设置文本的样式，包括字体、大小、颜色、行高、对齐方式等。以下是一些常用的文本样式设置示例：




/* 单个字母样式 */
.letter-style {
  font-family: 'Arial'; /* 设置字体 */
  font-size: 20px; /* 设置字号 */
  font-weight: bold; /* 设置字体粗细 */
  color: #333333; /* 设置字体颜色 */
  text-decoration: underline; /* 设置下划线 */
}
 
/* 段落样式 */
.paragraph-style {
  line-height: 1.5; /* 设置行高 */
  color: #666666; /* 设置文本颜色 */
  text-align: center; /* 设置文本居中对齐 */
}

在HTML中使用这些样式：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Styles Example</title>
<style>
  /* 将CSS代码放在这里 */
  .letter-style {
    font-family: 'Arial';
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    text-decoration: underline;
  }
 
  .paragraph-style {
    line-height: 1.5;
    color: #666666;
    text-align: center;
  }
</style>
</head>
<body>
 
<p>This is a <span class="letter-style">paragraph</span> with custom styles.</p>
 
<p class="paragraph-style">This paragraph is styled and centered.</p>
 
</body>
</html>

在这个例子中，第一个<p>标签中的<span>元素使用了.letter-style类来设置单个字母的样式，而第二个<p>标签使用.paragraph-style类来设置整个段落的样式。

- 阅读更多 -

html + css 布局技巧总结

System

2024-08-10

所有,css

在HTML和CSS中，有许多技巧可以用来创建更加复杂和高效的布局。以下是一些常见的技巧：

使用Flexbox布局
Flexbox是一种强大的布局模型，可以在任何方向上排列子元素，使它们能够以一种动态的方式对齐。

HTML:




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

CSS:




.container {
  display: flex;
}
 
.item {
  margin: 5px;
  padding: 10px;
}

使用Grid布局
Grid布局是一个基于网格的二维布局系统，可以使网页更加结构化和容易维护。

HTML:




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

CSS:




.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}
 
.grid-item {
  border: 1px solid black;
  padding: 10px;
  margin: 5px;
}

使用定位布局
定位布局允许你将元素放置在页面上的任何位置。

HTML:




<div class="positioned">I am positioned</div>

CSS:




.positioned {
  position: absolute;
  top: 10px;
  left: 10px;
}

使用CSS3的Transform属性
Transform属性可以对元素进行2D或3D转换。

HTML:




<div class="rotated">I am rotated</div>

CSS:




.rotated {
  transform: rotate(90deg);
}

使用Z-index调整层叠顺序
Z-index属性可以控制元素在Z轴方向上的层叠顺序。

HTML:




<div class="blue">Blue</div>
<div class="red">Red</div>

CSS:




.blue {
  background-color: blue;
  position: relative;
  z-index: 10;
}
 
.red {
  background-color: red;
  position: relative;
  z-index: 5;
}

使用CSS伪类
CSS伪类可以用来添加特殊效果，如:hover，:active，:focus等。

HTML:




<button class="hover-effect">Hover Over Me!</button>

CSS:




.hover-effect:hover {
  background-color: blue;
}

使用CSS3的动画和过渡
CSS3的动画和过渡可以创建平滑的视觉效果。

HTML:




<div class="animated">I am animated</div>

CSS:




.animated {
  transition: transform 0.5s ease;
}
 
.animated:hover {
  transform: scale(1.2);
}

使用Media Queries适应不同屏幕大小
Media Queries可以根据屏幕大小调整CSS样式。

CSS:




.container {
  background-color: blue;
}
 
@media screen and (max-width: 600px) {
  .container {
    background-

- 阅读更多 -

学透CSS-可浮动placeholder，让你的登录不再枯燥！

System

2024-08-10

所有,css

在CSS中，我们可以使用伪元素来创建一个自定义的placeholder效果，这样可以提高用户输入的体验，让登录表单不再枯燥。以下是一个简单的例子：

HTML:




<input type="text" class="custom-input" placeholder="请输入用户名">

CSS:




.custom-input {
  position: relative;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}
 
.custom-input::placeholder {
  color: transparent;
}
 
.custom-input::-webkit-input-placeholder {
  color: transparent;
}
 
.custom-input:placeholder-shown::before {
  content: attr(placeholder);
  position: absolute;
  top: 10px;
  left: 10px;
  color: #888;
  transition: top 0.5s, opacity 0.5s;
  opacity: 0;
}
 
.custom-input:focus:placeholder-shown::before {
  top: 0;
  opacity: 1;
}

在这个例子中，我们创建了一个.custom-input类，当输入框获得焦点时，通过:placeholder-shown伪类和::before伪元素，我们可以自定义placeholder的样式和位置，使其在输入框内部浮动显示，提高用户体验。

- 阅读更多 -

Web03--CSS进阶

System

2024-08-10

所有,css

在CSS中，我们可以使用各种技巧和工具来创建复杂的设计。以下是一些进阶技巧和示例代码：

伪类与伪元素的使用

伪类用于选择DOM元素的特殊状态，比如:hover、:focus、:active等。伪元素用于在DOM元素的内容之前或之后插入内容，比如::before和::after。




/* 伪类 */
a:hover {
  color: blue;
}
 
/* 伪元素 */
p::first-letter {
  font-size: 200%;
}

CSS3的变换、过渡和动画

CSS3的变换(transform)、过渡(transition)和动画(animation)可以创建生动的视觉效果。




/* 过渡 */
button {
  transition: background-color 0.3s ease-in-out;
}
button:hover {
  background-color: blue;
}
 
/* 动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
div {
  animation-name: example;
  animation-duration: 4s;
}

CSS Flexbox布局

Flexbox是一种强大的布局模型，可以创建灵活的容器，能够在不同的屏幕和设备上提供一致的布局。




/* 基本的Flex容器 */
.flex-container {
  display: flex;
}
 
/* 在Flex容器中居中对齐项目 */
.center-flex-items {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS Grid布局

Grid布局是一种更强大的布局模型，可以创建复杂的网格布局。




/* 创建一个简单的网格 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
 
/* 使用网格区域 */
.grid-container {
  display: grid;
  grid-template-areas: "header header header"
                       "nav content sidebar"
                       "footer footer footer";
}

CSS用户界面样式

CSS提供了一些样式规则，可以改善表单输入的用户界面，例如:range、:search、:number等。




input[type="range"] {
  width: 100%;
  margin: 0;
  -webkit-appearance: none; /* 移除默认样式 */
  background-color: #f0f0f0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* 移除默认样式 */
  width: 20px;
  height: 20px;
  background-color: blue;
}

CSS自定义字体

使用CSS @font-face规则，可以在网页中使用自定义字体。




@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff') format('woff');
}
body {
  font-family: 'MyCustomFont', sans-serif;
}

CSS媒体查询

媒体查询可以根据设备的特性（如屏幕尺寸、分辨率等）来应用不同的样式规则。




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

这些是CSS中一些高级技巧和工具，可以用来创建更复杂和高级的网页设计。

- 阅读更多 -

css基本操作，简单选择器，复杂选择器

System

2024-08-10

所有,css

CSS（层叠样式表）是一种用来为网页添加样式的语言。在CSS中，选择器是用来指定HTML元素应该如何被样式化的规则。基本选择器主要包括元素选择器、类选择器、ID选择器和通用选择器，而复杂选择器可以是组合选择器，如组合器、子选择器、相邻选择器、伪类选择器等。

以下是一些CSS基本操作的示例代码：




/* 元素选择器 */
p {
  color: blue;
}
 
/* 类选择器 */
.my-class {
  font-size: 16px;
}
 
/* ID选择器 */
#my-id {
  background-color: yellow;
}
 
/* 通用选择器 */
* {
  margin: 0;
  padding: 0;
}
 
/* 组合选择器 */
div p {
  font-weight: bold;
}
 
/* 子选择器 */
div > p {
  color: red;
}
 
/* 相邻选择器 */
p + div {
  border: 1px solid black;
}
 
/* 伪类选择器 */
a:hover {
  text-decoration: underline;
}

在这个例子中，我们定义了不同的选择器来指定如何显示HTML文档中的不同元素。例如，p { color: blue; } 表示所有段落文本将显示为蓝色。类选择器、ID选择器和通用选择器用于设置全局样式。组合选择器、子选择器、相邻选择器和伪类选择器提供了更多的定位和样式化机会。

- 阅读更多 -

CSS：filter滤镜详解（用法 + 代码 + 例子 + 效果）

System

2024-08-10

所有,css

CSS的filter属性被用来应用图像的视觉效果，比如模糊或者对比度调整。filter属性可以应用多种不同类型的函数。

以下是filter属性的一些常用值：

grayscale(): 将图像转换为灰度图像。接受一个0到1之间的值来调整灰度级别。
sepia(): 将图像转换为深褐色。接受一个0到1之间的值来调整深褐色级别。
saturate(): 调整图像的饱和度。接受一个0到无穷之间的值。
hue-rotate(): 旋转图像的色相轮廓。接受一个角度值，例如hue-rotate(90deg)。
invert(): 反转图像颜色。接受一个0到1之间的值来调整反转程度。
opacity(): 调整图像的不透明度。接受一个0到1之间的值。
brightness(): 调整图像的亮度。接受一个0到1之间的值。
contrast(): 调整图像的对比度。接受一个0到1之间的值。
blur(): 对图像应用高斯模糊。接受一个像素值来定义模糊半径。
drop-shadow(): 给图像设置一个阴影效果，类似于box-shadow属性。

下面是一些使用filter属性的例子：




<!DOCTYPE html>
<html>
<head>
<style>
/* 灰度图像 */
.gray-image {
  filter: grayscale(1);
}
 
/* 深褐色图像 */
.sepia-image {
  filter: sepia(1);
}
 
/* 亮度提升 */
.brighter-image {
  filter: brightness(2);
}
 
/* 对比度降低 */
.lower-contrast-image {
  filter: contrast(0.5);
}
 
/* 模糊效果 */
.blur-image {
  filter: blur(10px);
}
 
/* 阴影效果 */
.shadow-image {
  filter: drop-shadow(16px 16px 20px red);
}
</style>
</head>
<body>
 
<img src="image.jpg" alt="Original Image">
<img class="gray-image" src="image.jpg" alt="Grayscale Image">
<img class="sepia-image" src="image.jpg" alt="Sepia Image">
<img class="brighter-image" src="image.jpg" alt="Brighter Image">
<img class="lower-contrast-image" src="image.jpg" alt="Lower Contrast Image">
<img class="blur-image" src="image.jpg" alt="Blurred Image">
<img class="shadow-image" src="image.jpg" alt="Shadowed Image">
 
</body>
</html>

在这个例子中，我们有一个原始的图像，然后应用了多种滤镜效果。你可以通过调整每个类中filter属性的值来看到不同的效果。

- 阅读更多 -