1. 首页
  2. 标签
  3. css
CSS3盒子的背景、倒角、阴影。
System
2024-08-21
所有,css3



/* 设置一个盒子的背景、倒角和阴影 */
.box {
  background: linear-gradient(to right, #FF5252, #FF5252); /* 线性渐变背景 */
  border-radius: 20px; /* 盒子的边框倒角 */
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); /* 盒子的阴影 */
  width: 200px; /* 盒子的宽度 */
  height: 200px; /* 盒子的高度 */
  margin: 20px; /* 盒子的外边距 */
}

这段代码为一个类名为.box的元素设置了一个线性渐变背景、边框倒角以及盒子阴影。它展示了如何使用CSS3的渐变、边角圆角和盒子阴影来增强盒子的视觉效果。

- 阅读更多 -
用css画一个csdn程序猿
System
2024-08-21
所有,css3

以下是使用CSS创建一个简单程序猿图形的代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cutey Programmer</title>
<style>
  .programmer {
    position: relative;
    width: 200px;
    height: 300px;
    background: #29b6f6;
    border-radius: 50% 50%;
    margin: 50px auto;
  }
  .programmer::before, .programmer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .programmer::before {
    width: 60px;
    height: 100px;
    background: #29b6f6;
    border-radius: 50%;
  }
  .programmer::after {
    width: 80px;
    height: 120px;
    background: #29b6f6;
    border-radius: 50%;
    z-index: -1;
  }
  .programmer-body::before, .programmer-body::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 180px;
    background: #29b6f6;
    border-radius: 50%;
  }
  .programmer-body::before {
    top: -50px;
    left: 20px;
    z-index: -1;
  }
  .programmer-body::after {
    bottom: -50px;
    right: 20px;
    z-index: -1;
  }
  .programmer-head {
    position: absolute;
    top: -60px;
    left: 60px;
    width: 60px;
    height: 60px;
    background: #29b6f6;
    border-radius: 50%;
    z-index: 1;
  }
  .programmer-ear {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #29b6f6;
    border-radius: 50%;
    z-index: 1;
  }
  .programmer-ear.left {
    top: -10px;
    left: 30px;
  }
  .programmer-ear.right {
    top: -10px;
    right: 30px;
  }
  .programmer-eye {
    position: absolute;
    width: 16px;
    height: 28px;
    background: white;
    border-radius: 50%;
    z-index: 1;
  }
  .programmer-eye.left {
    top: 40px;
    left: 40px;
  }
  .programmer-eye.right {
    top: 40px;
    right: 40px;
  }
  .programmer-eyebrow {
    position: absolute;
    width: 80px;
    height: 12px;
    background: #29b6f6;
    border-radius: 50%;
    z-index: 1;
  }
  .programmer-eyebrow.left {
    top: 32px;
    left: 32px;
    transform: rotate(-20deg);
  }
  .programmer-eyebrow.right {
    top: 32px;
    right: 32px;
    transform: rotate(20deg);
  }
  .programmer-nose {
    position: absolute;
    width: 24px;
    he
- 阅读更多 -
【HTML+CSS】弹性盒子
System
2024-08-21
所有,css3

弹性盒子（Flexible Box，Flexbox）是CSS3的一种布局模型，可以简便、灵活地实现各种页面布局。

以下是一个使用弹性盒子的简单示例：

HTML:




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

CSS:




.flex-container {
  display: flex; /* 使用弹性盒子布局 */
  flex-direction: row; /* 设置主轴方向为水平方向 */
  justify-content: space-around; /* 项目在主轴方向上平均分布 */
  align-items: center; /* 项目在交叉轴方向上居中对齐 */
  height: 100px; /* 容器高度 */
  background-color: #f0f0f0; /* 背景颜色 */
}
 
.flex-item {
  width: 100px; /* 项目宽度 */
  text-align: center; /* 文字居中 */
  line-height: 100px; /* 行高与容器高度相同，实现垂直居中 */
}

这个示例创建了一个水平方向上平均分布的弹性容器，其中包含三个等宽的子项。每个子项在水平方向上是等宽的，并且在垂直方向上通过行高与容器高度对齐，实现居中显示。

- 阅读更多 -
CSS层级问题以及CSS透明效果
System
2024-08-21
所有,css3



/* 解决层级问题 */
.parent {
  position: relative; /* 相对定位 */
}
.child {
  position: absolute; /* 绝对定位 */
  top: 0; /* 子元素定位到父元素的顶部 */
  left: 0; /* 子元素定位到父元素的左侧 */
}
 
/* 添加透明度效果 */
.transparent {
  opacity: 0.5; /* 设置元素的透明度为50% */
  filter: alpha(opacity=50); /* 针对IE8及以下版本的兼容写法 */
}

这段代码展示了如何解决层级问题和如何在CSS中添加透明效果。使用position: absolute;可以确保.child元素相对于.parent定位，而opacity属性和filter属性则用于添加透明效果，同时考虑了IE浏览器的兼容性。

- 阅读更多 -
html中二级菜单以及主页的实现，HTML+css
System
2024-08-21
所有,css3

以下是一个简单的HTML和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 {
    font-family: Arial, sans-serif;
  }
  .header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
  }
  .nav {
    list-style: none;
    background-color: #444;
    overflow: hidden;
  }
  .nav li {
    float: left;
    border-right: 1px solid #bbb;
  }
  .nav li:last-child {
    border-right: none;
  }
  .nav li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
  }
  .nav li a:hover {
    background-color: #555;
  }
  .nav-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .nav-dropdown a {
    color: black;
    padding: 12px 15px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  .nav-dropdown a:hover {
    background-color: #f1f1f1;
  }
  .nav li:hover .nav-dropdown {
    display: block;
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>主页</h1>
</div>
 
<ul class="nav">
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a>
    <ul class="nav-dropdown">
      <li><a href="#">内部新闻</a></li>
      <li><a href="#">公司动态</a></li>
    </ul>
  </li>
  <li><a href="#contact">联系我们</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

这段代码展示了如何使用HTML和CSS创建一个简单的二级菜单，当鼠标悬停在具有下拉子菜单的导航项上时，会显示子菜单。这个示例提供了一个基本框架，可以根据实际需求进行扩展和定制。

- 阅读更多 -
这个css布局样式真巧妙啊，react导航栏组件：Headmenu实现
System
2024-08-21
所有,css3

由于原代码已经非常简洁，以下是一个React组件的示例，使用了类似的CSS样式来实现一个头部导航栏（Headmenu）：




import React from 'react';
import { Link } from 'react-router-dom';
import './Headmenu.css';
 
const Headmenu = () => {
  return (
    <div className="headmenu">
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/about">关于我们</Link>
        </li>
        <li>
          <Link to="/contact">联系方式</Link>
        </li>
      </ul>
      <style jsx>{`
        .headmenu {
          background-color: #282c34;
          overflow: hidden;
          font-size: 17px;
          font-weight: 300;
          padding: 10px 0;
          text-align: center;
        }
        .headmenu ul {
          display: inline-block;
        }
        .headmenu li {
          display: inline;
          margin-right: 20px;
        }
        .headmenu a {
          color: #fff;
          text-decoration: none;
        }
        .headmenu a:hover {
          text-decoration: underline;
        }
      `}</style>
    </div>
  );
};
 
export default Headmenu;

这个React组件使用了内联样式（即style jsx）来避免CSS文件的引入，并且使用了react-router-dom中的Link组件来创建导航链接。这个示例展示了如何使用React和CSS来创建一个简洁而又现代的导航栏。

- 阅读更多 -
css 浮动
System
2024-08-21
所有,css3

CSS 浮动（Float）属性用于创建浮动框，将其移动到一边，使其周围的内容环绕。浮动框可以是左浮动（float: left;）或右浮动（float: right;）。

解决浮动带来的父元素高度塌陷问题的常用方法有：

  1. 使用 overflow: hidden; 或 overflow: auto; 在父元素上。
  2. 使用 clearfix 技巧，通常通过在父元素的结尾添加一个 clearfix 类的元素来解决。

以下是一个简单的 clearfix 实现示例：




/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}



<!-- 父元素 -->
<div class="parent clearfix">
  <!-- 子元素 -->
  <div class="child" style="float: left;">左浮动内容</div>
  <!-- 清除浮动 -->
</div>

使用这个 clearfix 类可以防止父元素高度塌陷，确保父元素包含所有浮动的子元素。

- 阅读更多 -
16.CSS中使用颜色
System
2024-08-21
所有,css3

在CSS中使用颜色，你可以通过以下几种方式指定颜色：

  1. 预定义的CSS颜色名称：这些是预定义好的颜色，如red、blue、green等。



p {
  color: red;
}
  1. 十六进制颜色代码：使用红绿蓝（RGB）颜色模型的十六进制值。



p {
  color: #FF0000; /* 红色 */
}
  1. RGB值：使用rgb()函数指定颜色，参数是红绿蓝三个颜色分量的数值，每个数值范围从0到255。



p {
  color: rgb(255, 0, 0); /* 红色 */
}
  1. RGBA值：使用rgba()函数指定颜色，参数包括红绿蓝三个颜色分量和透明度（alpha），透明度的值从0（完全透明）到1（完全不透明）。



p {
  color: rgba(255, 0, 0, 0.5); /* 半透明的红色 */
}
  1. HSL值：使用hsl()函数指定颜色，参数包括色调（Hue）、饱和度（Saturation）和亮度（Lightness）。



p {
  color: hsl(0, 100%, 50%); /* 红色 */
}
  1. HSLA值：使用hsla()函数指定颜色，参数包括色调、饱和度、亮度和透明度。



p {
  color: hsla(0, 100%, 50%, 0.5); /* 半透明的红色 */
}
  1. 使用CSS变量：通过自定义属性，你可以在多个CSS属性中重复使用同一个颜色值。



:root {
  --main-color: #FF0000; /* 定义颜色变量 */
}
 
p {
  color: var(--main-color); /* 使用颜色变量 */
}

选择颜色表示方法时，考虑你的颜色需要在不同的上下文中保持一致性、可读性和可维护性。

- 阅读更多 -
css3制作鼠标悬浮图文动画效果
System
2024-08-21
所有,css3

在CSS3中，可以使用transition属性和:hover伪类来制作鼠标悬浮图文动画效果。以下是一个简单的例子，展示了如何实现这种效果：

HTML:




<div class="container">
  <div class="image">
    <img src="image.jpg" alt="示例图片">
  </div>
  <div class="text">
    <h3>图片标题</h3>
    <p>图片描述文字</p>
  </div>
</div>

CSS:




.container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
 
.image {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  transition: transform 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(100%);
}
 
.container:hover .image {
  transform: translateY(-100%);
}
 
.container:hover .text {
  transform: translateY(0);
}

在这个例子中，.container 是包含图片和文本的容器。.image 是包含图片的div，.text 是包含文本的div。当鼠标悬浮在 .container 上时，.image 的 transform 属性从 translateY(0) 变为 translateY(-100%)，.text 的 transform 属性从 translateY(100%) 变为 translateY(0)，从而实现了图片和文本同时向上移动的动画效果。

- 阅读更多 -
【CSS3】CSS3 2D 转换 - 三种变换的综合写法 ( 同时进行 移动 / 旋转 / 缩放 变换 | 代码示例 )
System
2024-08-21
所有,css3



/* 同时进行移动、旋转和缩放变换的示例 */
.element {
  /* 首先移动元素 */
  transform: translateX(50px) translateY(100px);
 
  /* 然后旋转元素 */
  transform: rotate(45deg);
 
  /* 最后缩放元素 */
  transform: scale(1.5, 0.8);
}

上述代码中，.element 类的 transform 属性被重复定义了三次，每次只应用一种变换类型。但是，这种写法并没有将三种变换合并在一个 transform 属性中，因此它不会产生预期的效果。

正确的写法应该是把所有变换函数放在一个 transform 属性中，并用空格分隔它们：




/* 正确的同时进行移动、旋转和缩放变换的写法 */
.element {
  transform: translateX(50px) translateY(100px) rotate(45deg) scale(1.5, 0.8);
}

这样，移动、旋转和缩放变换会按照指定的顺序依次应用，合并成一个复合变换。

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