1. 首页
  2. 分类
  3. css3
CSS取消父级元素继承下来的样式
System
2024-08-20
所有,css3

在CSS中，如果想要取消子元素继承到父元素的样式，可以使用initial关键字或者指定需要重写的样式属性。

例如，如果父元素设置了文本颜色（color）和字体大小（font-size），但你想要子元素有不同的样式，可以这样写：




/* 父元素样式 */
.parent {
  color: blue;
  font-size: 16px;
}
 
/* 子元素样式，重写继承来的样式 */
.child {
  color: initial; /* 重置为默认值 */
  font-size: 20px; /* 设置新的字体大小 */
}

如果想要完全取消所有继承的样式，可以使用all: unset。




/* 子元素样式，取消所有继承的样式 */
.child {
  all: unset;
}

请注意，initial和unset的区别在于initial总是设置属性为其默认值，而unset则是将属性设置为该元素继承或默认值。如果父元素有color属性被定制，那么unset会使得子元素有相同的颜色，而initial会强制使得子元素的颜色为默认值。

- 阅读更多 -
html+css鼠标悬停发光按钮！[HTML鼠标悬停的代码]使用HTML + CSS实现鼠标悬停的一些奇幻效果!
System
2024-08-20
所有,css3

在HTML和CSS中，可以通过为按钮添加:hover伪类选择器来实现鼠标悬停效果。以下是一个简单的例子，演示了如何为按钮添加发光效果：

HTML:




<button class="glossy-button">悬停我</button>

CSS:




.glossy-button {
  padding: 10px 20px;
  border: none;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  transition: box-shadow 0.3s ease; /* 平滑过渡阴影效果 */
}
 
.glossy-button:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); /* 鼠标悬停时的阴影效果 */
}

在这个例子中，.glossy-button 类定义了按钮的基础样式，而 .glossy-button:hover 类定义了鼠标悬停在按钮上时发生的样式变化。当鼠标悬停在按钮上时，会有一个发光的效果，通过增加一个阴影来实现。

- 阅读更多 -
css 简单的搜索框动画效果
System
2024-08-20
所有,css3



/* 设置搜索框的基本样式 */
.search-input {
  width: 240px;
  height: 50px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 18px;
  background-color: #f7f7f7;
  transition: width 0.5s ease-in-out; /* 添加过渡动画以实现动态变化 */
}
 
/* 当搜索框获得焦点时，改变宽度 */
.search-input:focus {
  width: 400px;
  outline: none; /* 去除浏览器自带的焦点样式 */
}
 
/* 可以添加一个伪元素来增加一个放大镜的图标 */
.search-input::before {
  content: url('search-icon.png'); /* 替换为你的图标路径 */
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 20px; /* 图标宽度 */
  height: 20px; /* 图标高度 */
  pointer-events: none; /* 使伪元素不接收鼠标事件 */
}

这段代码为一个搜索框设置了基本样式，并且通过:focus伪类在用户输入时使搜索框宽度变化，同时添加了一个放大镜图标。通过transition属性，我们为宽度变化添加了平滑的动画效果。

- 阅读更多 -
css 背景图片渐变
System
2024-08-20
所有,css3

CSS 背景图片渐变效果可以通过多种方式实现，其中一种是使用线性渐变（linear-gradient）作为背景图片的替代，并利用 background-image 属性来创建渐变效果。

以下是一个简单的例子，展示如何使用 CSS 创建渐变背景图片效果：




/* 创建一个线性渐变，从蓝色到红色 */
.gradient-background {
  background-image: linear-gradient(to right, blue, red);
}

在 HTML 中使用这个类：




<div class="gradient-background">这里是渐变背景</div>

这段代码会在指定的元素上显示一个从左到右的蓝色到红色的渐变背景。您可以根据需要调整渐变的方向和颜色。

- 阅读更多 -
【HTML+CSS】圆角矩形border-radius
System
2024-08-20
所有,css3

在CSS中，border-radius属性用于设置元素的圆角。这个属性可以接受一个或两个值，单个值设置所有四个角的半径，两个值则分别设置元素左上角和右下角以及右上角和左下角的半径。

下面是一个简单的HTML和CSS代码示例，展示如何创建圆角矩形：




<!DOCTYPE html>
<html>
<head>
<style>
.rounded-rectangle {
  width: 200px;
  height: 100px;
  background-color: skyblue;
  border-radius: 20px; /* 设置圆角的半径为20px */
}
</style>
</head>
<body>
 
<div class="rounded-rectangle"></div>
 
</body>
</html>

在这个例子中，.rounded-rectangle类设置了一个宽度为200px，高度为100px的矩形，背景颜色为天蓝色。border-radius属性设置为20px，使得所有四个角都变成了圆角。如果你想为不同的角设置不同的半径，可以提供两个、三个或四个值。例如：




border-radius: 10px 20px 30px 40px; /* 左上角、右上角、右下角、左下角的半径 */

或者：




border-radius: 10px 20px; /* 左上角和右下角的半径、右上角和左下角的半径 */

使用border-radius可以创建各种不同的圆角矩形。

- 阅读更多 -
基础篇10—CSS padding(填充内边距)解析
System
2024-08-20
所有,css3

CSS padding属性是用来设置一个元素的内边距，即内容和边界之间的空间。

CSS padding属性可以有1到4个值。

  1. 当只有一个值提供时，它将用于所有四个边。

示例代码：




.element {
  padding: 10px;
}
  1. 当有两个值提供时，第一个值用于上／下，第二个值用于左／右。

示例代码：




.element {
  padding: 10px 20px;
}
  1. 当有三个值提供时，第一个值用于上，第二个值用于左／右，第三个值用于下。

示例代码：




.element {
  padding: 10px 20px 30px;
}
  1. 当有四个值提供时，它们分别用于上，右，下，左。

示例代码：




.element {
  padding: 10px 20px 30px 40px;
}

CSS padding属性也可以使用以下单独的属性来设置每个边界的填充：

  • padding-top: 设置元素的顶部填充。
  • padding-right: 设置元素的右侧填充。
  • padding-bottom: 设置元素的底部填充。
  • padding-left: 设置元素的左侧填充。

示例代码：




.element {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

CSS padding属性可以使用百分比值来设置填充，这时候百分比是相对于父元素的宽度来计算的。

示例代码：




.element {
  padding: 5%;
}

CSS padding属性也可以使用关键字"inherit"，这将从父元素继承padding。

示例代码：




.element {
  padding: inherit;
}

CSS padding属性也可以使用"auto"值，这将自动调整上下左右的填充，以保持元素的水平与垂直居中。

示例代码：




.element {
  padding: auto;
}

CSS padding属性可以使用"initial"值，这将设置为默认的padding值。

示例代码：




.element {
  padding: initial;
}

CSS padding属性可以使用"unset"值，这将从父元素继承padding，如果没有父元素，则使用默认的padding。

示例代码：




.element {
  padding: unset;
}
- 阅读更多 -
css实现卡片内容动态切换效果
System
2024-08-20
所有,css3



/* 定义卡片容器样式 */
.card-container {
  position: relative;
  width: 300px;
  height: 200px;
  perspective: 1000px;
}
 
/* 定义卡片样式 */
.card {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 1s;
}
 
/* 定义不同卡片背面内容的样式 */
.card-1 {
  background-color: #FF6347;
}
 
.card-2 {
  background-color: #A52A2A;
  transform: rotateY(-180deg);
}
 
/* JavaScript触发卡片翻转动画 */
function toggleCard() {
  var card = document.querySelector('.card');
  card.style.transform = 'rotateY(-180deg)';
}

这个简单的示例展示了如何使用CSS来创建一个卡片容器和卡片元素，并通过JavaScript函数toggleCard来切换卡片的可视内容。这个例子演示了如何使用CSS3的3D转换和视觉效果来创造动态的用户界面效果。

- 阅读更多 -
html如何设置全局字体
System
2024-08-20
所有,css3

在HTML中设置全局字体可以通过CSS来实现。你可以在<head>标签内的<style>标签中定义全局字体样式，或者在一个外部的CSS文件中定义。

下面是一个示例，展示了如何在HTML文件中设置全局字体：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Global Font Example</title>
    <style>
        body {
            font-family: 'Arial', sans-serif; /* 设置全局字体为Arial */
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <!-- 其他内容 -->
</body>
</html>

在上面的代码中，body选择器被用来设置全局字体。所有在<body>标签内的文本都将使用这个字体。如果你想要将全局字体应用到所有元素，你可以使用通用选择器*。

如果你想要将字体样式放在一个单独的文件中，你可以创建一个CSS文件，比如styles.css，然后在HTML中引入它：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Global Font Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

在styles.css文件中：




body {
    font-family: 'Arial', sans-serif; /* 设置全局字体为Arial */
}

这样，所有包含这个CSS文件的页面都会应用这个全局字体设置。

- 阅读更多 -
VUE2 环形进度条（百分比动态加载）
System
2024-08-20
所有,css3

在Vue 2中创建一个环形进度条组件，可以使用以下步骤：

  1. 定义组件模板。
  2. 使用CSS绘制环形进度条的外观。
  3. 使用Vue的响应式属性来动态更新进度条的百分比。

以下是一个简单的环形进度条组件示例：




<template>
  <div class="progress-ring" :style="{ transform: `scale(${size})` }">
    <svg :width="radius" :height="radius" viewBox="0 0 100 100">
      <circle class="progress-ring__circle"
              cx="50"
              cy="50"
              :r="innerRadius"
              :stroke-width="thickness"
              stroke="grey"
              fill="transparent" />
      <circle class="progress-ring__circle"
              cx="50"
              cy="50"
              :r="innerRadius"
              :stroke-width="thickness"
              stroke="blue"
              stroke-linecap="round"
              fill="transparent"
              :style="{ strokeDasharray: circumference + ' ' + circumference,
                        strokeDashoffset: circumference * (1 - (percentage / 100)),
                      }" />
    </svg>
    <div class="progress-ring__text">{{ percentage.toFixed(0) }}%</div>
  </div>
</template>
 
<script>
export default {
  props: {
    size: {
      type: Number,
      default: 1
    },
    radius: {
      type: Number,
      default: 100
    },
    thickness: {
      type: Number,
      default: 8
    },
    percentage: {
      type: Number,
      required: true,
      validator: value => value >= 0 && value <= 100
    }
  },
  computed: {
    innerRadius() {
      return this.radius / (2 * this.size) - this.thickness / 2;
    },
    circumference() {
      return 2 * Math.PI * this.innerRadius;
    }
  }
};
</script>
 
<style scoped>
.progress-ring {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
 
.progress-ring__circle {
  transform-origin: center;
  transition: all 0.2s ease-in-out;
}
 
.progress-ring__text {
  position: absolute;
  text-align: center;
  line-height: 100px;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}
</style>

在这个组件中，size 控制环形进度条的大小，radius 控制圆的半径，thickness 控制环形的厚度，percentage 是要显示的百分比。计算属性 innerRadius 和 circumference 被用于计算内圆半径和圆周长。

要使用这个组件，可以在父组件中这样使用：




<template>
  <div>
    <progress-ring :percentage="50" />
  </div>
</template>
 
<script>
import ProgressRing from './Progr
- 阅读更多 -
纯CSS实现跑马灯效果
System
2024-08-20
所有,css3

要使用纯CSS实现跑马灯效果，可以使用@keyframes规则创建动画，并结合animation属性应用到文本上。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marquee Text</title>
<style>
  .marquee {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
  }
 
  .marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
  }
 
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>
</head>
<body>
 
<div class="marquee">
  <span class="marquee-text">这是跑马灯效果的文本 - 它会不断滚动起来</span>
</div>
 
</body>
</html>

在这个例子中，.marquee-text 是要滚动的文本，.marquee 是滚动容器。@keyframes 规则定义了名为 marquee 的动画，它通过改变 transform 的 translateX 值来实现滚动效果。动画设置为每10秒滚动整个文本宽度的距离，并且无限循环。

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