分类前端技术下的文章

2024-08-08

要创建一个具有渐变色圆角边框的元素，你可以使用CSS的border-radius属性来设置圆角，然后使用background-image属性来设置渐变背景。以下是一个简单的例子：




.gradient-border {
  border-radius: 10px; /* 圆角大小 */
  background-image: linear-gradient(to right, #ff7e5f, #feb47b); /* 渐变色 */
  border: 2px solid transparent; /* 透明边框，以便背景可以显示出来 */
  padding: 10px; /* 内边距 */
  width: 200px; /* 宽度 */
  height: 100px; /* 高度 */
}

HTML部分：




<div class="gradient-border"></div>

这段代码会创建一个带有渐变色圆角边框的div元素。渐变色从左到右由#ff7e5f到#feb47b进行过渡，圆角大小为10px，边框宽度为2px，透明度使得渐变可以完整显示出来。

- 阅读更多 -

CSS中的幽灵空白节点

System

2024-08-08

所有,css3

"幽灵空白节点"（phantom whitespace nodes）是CSS布局中的一个概念，通常发生在块级元素内部，当块级元素的内容有前后空格或换行时，这些空格或换行会被视作文本节点并产生额外的空白。

解决方法：

使用CSS的font-size属性设置为0，这样可以移除文本节点产生的空白。




.parent-element {
  font-size: 0;
}

使用letter-spacing或margin属性设置为负值，使得正常的空白也被移除。




.parent-element {
  letter-spacing: -5px; /* 或使用适合你布局的具体值 */
}

确保块级元素内部没有不需要的空格、换行或其他不可见字符。
使用Flexbox或Grid布局，这些现代布局方式通常可以更好地处理这种空白问题。
使用overflow-wrap和word-break属性来控制文本的换行。




.parent-element {
  overflow-wrap: break-word;
  word-break: break-all;
}

选择最合适的方法取决于具体布局和兼容性需求。

- 阅读更多 -

vue中通过css实现旋转地球

System

2024-08-08

所有,css3

在Vue中，可以通过CSS动画来实现旋转地球的效果。以下是一个简单的例子：

创建一个Vue组件：




<template>
  <div class="earth-container">
    <div class="earth"></div>
  </div>
</template>
 
<script>
export default {
  name: 'RotatingEarth'
}
</script>
 
<style scoped>
.earth-container {
  width: 200px;
  height: 200px;
  perspective: 200px;
  position: relative;
}
 
.earth {
  width: 100%;
  height: 100%;
  background-color: blue;
  position: absolute;
  border-radius: 50%;
  transform-origin: center center -100px;
  animation: rotate 10s linear infinite;
}
 
@keyframes rotate {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}
</style>

这个组件包括一个div.earth-container作为容器，它有一个视角（perspective），使得子元素看起来是3D旋转的。div.earth是代表地球的元素，它被放置在容器的中心，并且被赋予了一个动画，使其绕y轴旋转。

这个例子中的地球是一个简单的蓝色圆球，你可以通过调整背景图像来使它看起来更像地球。如果你想要更复杂的地球效果，比如带有云层、海洋和陆地的，你可能需要使用更复杂的CSS或者SVG来实现。

System

2024-08-08

所有,css3




/* 清除默认的列表样式和内外边距 */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
/* 设置导航栏链接的默认样式 */
nav ul li a {
    display: block; /* 将链接显示为块级元素 */
    padding: 5px 10px; /* 设置内边距 */
    text-decoration: none; /* 移除下划线 */
    color: #000; /* 设置文本颜色 */
    border-radius: 5px; /* 圆角边框 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡效果 */
}
 
/* 鼠标悬停时的样式变化 */
nav ul li a:hover {
    background-color: #555; /* 背景颜色变深 */
    color: #fff; /* 文本颜色变亮 */
}
 
/* 设置当前活动链接的样式 */
nav ul li a.active {
    background-color: #007bff; /* 背景颜色变蓝 */
    color: #fff; /* 文本颜色变亮 */
}
 
/* 浮动导航栏模块至左侧 */
nav ul li {
    float: left; /* 向左浮动 */
}
 
/* 清除浮动 */
nav ul::after {
    content: "";
    display: table;
    clear: both;
}

这段代码为导航栏模块设置了浮动布局，使得导航链接并排显示。同时，它还展示了如何去除列表的默认样式，并为链接设置了基本的样式和悬停效果。最后，使用了::after伪元素来清除浮动，确保父元素能够包含浮动的子元素。

- 阅读更多 -

【h5】相对定位和绝对定位

System

2024-08-08

所有,css3

在HTML5中，相对定位和绝对定位是CSS的两种定位机制。

相对定位（Relative Positioning）

相对定位是一个非常常用的技术，它可以让你指定元素相对于它在文档中原始位置的移动。当你使用相对定位时，元素仍然占据它在文档流中的原始空间。




.box {
  position: relative;
  top: 20px; /* 向下移动20px */
  left: 40px; /* 向右移动40px */
}

绝对定位（Absolute Positioning）

绝对定位是一个更加强大的技术，它可以让你指定元素相对于其最近的已定位的（即非 static ）祖先元素的移动。如果没有已定位的祖先元素，那么它将相对于最初的包含块进行定位（通常是浏览器窗口）。使用绝对定位时，元素会从文档流中完全移除，并且可以重叠其他元素。




.container {
  position: relative;
}
 
.box {
  position: absolute;
  top: 20px; /* 相对于父元素向下移动20px */
  left: 40px; /* 相对于父元素向右移动40px */
}

在上述代码中，.box元素被定位在.container元素内部的右下角，即.container元素的右下角加上top: 20px和left: 40px。如果没有.container，.box元素将相对于最初的包含块，即浏览器窗口进行定位。

- 阅读更多 -

CSS的多媒体嵌入

System

2024-08-08

所有,css

CSS多媒体嵌入是一种将CSS样式应用于HTML文档中的多媒体内容（如视频和音频）的方法。这可以通过使用HTML的<style>标签或外部CSS文件来实现。

以下是一个简单的示例，展示了如何在HTML文档中嵌入CSS来控制视频的样式：




<!DOCTYPE html>
<html>
<head>
<style>
  /* 针对所有视频元素 */
  video {
    width: 100%;
    height: auto;
  }
 
  /* 针对特定类名的视频元素 */
  .responsive-video {
    width: 100%;
    height: auto;
    display: block;
  }
</style>
</head>
<body>
 
<!-- 应用全局样式 -->
<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<!-- 应用特定类名的样式 -->
<video class="responsive-video" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
</body>
</html>

在这个例子中，我们定义了两种类型的视频样式：一种是全局的（不带类名），适用于所有视频元素；另一种是针对具有特定类名的视频（.responsive-video），并设置了其为响应式（宽度为100%，高度自动）。这样，你就可以根据需要为多媒体内容添加样式。

- 阅读更多 -

css选择器优先级排序

System

2024-08-08

所有,css3

CSS选择器的优先级是由选择器本身的特殊性决定的，特殊性值的高低依次是：

内联样式（使用HTML的style属性）
ID选择器
类选择器、属性选择器、伪类
元素选择器和伪元素
通配选择器（*）

特殊性值计算时，会将ID选择器的值计算在内，并且通过相应的乘法积增加。例如，一个类选择器与一个元素选择器组合的特殊性值将会比仅有一个元素选择器的低，因为类选择器的特殊性值为10。

如果两个选择器特殊性值相同，那么后定义的选择器会被应用。

以下是一个简单的例子，演示了如何根据这些规则来判断优先级：




#myId { /* 特殊性值100 */
  color: red;
}
 
div #myId { /* 特殊性值100 + 1 = 101 */
  color: blue;
}
 
.myClass { /* 特殊性值10 */
  color: green;
}
 
div .myClass { /* 特殊性值10 */
  color: purple;
}
 
div { /* 特殊性值1 */
  color: yellow;
}

如果我们应用这些规则到具体的元素上，例如：




<div id="myId" class="myClass">这是一个文本。</div>

根据特殊性值的比较，div #myId 的选择器优先级更高，因此文本颜色应该是蓝色。div .myClass 的选择器优先级和#myId相同，但它在#myId之后被定义，所以它的规则将不会被应用。

在实际开发中，我们通常会使用更复杂的选择器结构，并且利用层叠（cascade）和继承来构建样式，而不是仅仅依赖特殊性值来决定每一个属性。

- 阅读更多 -

css模糊效果(blur)

System

2024-08-08

所有,css3

CSS模糊效果可以使用filter属性中的blur()函数来实现。blur()函数接受一个参数，表示应用模糊的像素级别。

下面是一个简单的例子，演示了如何给一个元素应用模糊效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS模糊效果示例</title>
<style>
  .blur-effect {
    filter: blur(5px); /* 应用模糊效果，模糊半径为5像素 */
  }
</style>
</head>
<body>
 
<div class="original-image">
  <img src="image.jpg" alt="原图">
</div>
 
<div class="blur-effect-image">
  <img src="image.jpg" alt="模糊效果图" class="blur-effect">
</div>
 
</body>
</html>

在这个例子中，.original-image类中的图片是没有应用模糊效果的原图，而.blur-effect-image类中的图片则应用了模糊效果，模糊半径为5像素。你可以通过调整blur()函数中的数值来改变模糊的强度。

- 阅读更多 -

网站开发进阶CSS3媒体查询@media_css @media only

System

2024-08-08

所有,css3

在CSS中，媒体查询（Media Queries）是一种强大的工具，可以让你根据设备的特性（如屏幕尺寸、分辨率等）来应用不同的样式规则。

媒体查询可以使用两种方式：

通过@media指令在CSS中直接使用。
在HTML文档的<link>标签中使用。

下面是使用@media指令在CSS中的一个例子：




/* 应用于所有设备的基础样式 */
body {
  background-color: lightblue;
  color: white;
  font-size: 16px;
}
 
/* 仅当屏幕宽度至少为 600px 时应用以下样式 */
@media only screen and (min-width: 600px) {
  body {
    background-color: darkblue;
    color: black;
    font-size: 20px;
  }
}
 
/* 仅当设备是打印机时应用以下样式 */
@media print {
  body {
    background-color: white;
    color: black;
    font-size: 12px;
  }
}

在HTML中使用媒体查询的例子：




<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在上述例子中，print.css样式表仅在打印文档时应用。

注意：在实际开发中，媒体查询通常用于响应式设计，以便让网站在不同的设备上都可以良好显示，提高用户体验。

- 阅读更多 -

js插入节点/创建节点

System

2024-08-08

所有,css3

在JavaScript中，可以使用document.createElement方法创建新的节点，并使用Node.appendChild或Node.insertBefore方法将新创建的节点插入到DOM中。

例如，要创建一个<div>元素并将其插入到页面的<body>中，可以这样做：




// 创建一个新的div元素
var newDiv = document.createElement("div");
 
// 为新div添加内容
var newContent = document.createTextNode("这是新插入的div内容");
newDiv.appendChild(newContent);
 
// 插入到body中
document.body.appendChild(newDiv);

如果要插入到特定的位置，可以先找到该位置的节点，然后使用parentNode.insertBefore(newNode, referenceNode)方法：




// 假设已经存在一个元素，将新div插入到这个元素之前
var referenceElement = document.getElementById("existing-element");
var newDiv = document.createElement("div");
var newContent = document.createTextNode("这是新插入的div内容");
newDiv.appendChild(newContent);
 
// 插入到referenceElement之前
referenceElement.parentNode.insertBefore(newDiv, referenceElement);

以上代码展示了如何创建和插入新的节点。

- 阅读更多 -