分类 css3 下的文章

2024-08-13




/* 方法1: 使用flexbox */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}
 
/* 方法2: 使用grid */
.container {
  display: grid;
  place-items: center;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}
 
/* 方法3: 使用绝对定位和transform */
.container {
  position: relative;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}
 
/* 方法4: 使用margin:auto */
.container {
  position: relative;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  width: 50%; /* 或者其他尺寸 */
  margin: auto;
  /* 其他样式 */
}
 
/* 方法5: 使用text-align和inline-block */
.container {
  text-align: center;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  display: inline-block;
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}

以上代码提供了5种不同的方法来实现div的水平和垂直居中。每种方法都有其适用的场景，开发者可以根据具体需求选择合适的方法。

- 阅读更多 -

CSS3-盒子模型-边距问题

System

2024-08-13

所有,css3

在CSS3中，盒子模型包括了内容区域（content）、填充区域（padding）、边框区域（border）和外边距区域（margin）。设置这些区域的大小可以通过相关的CSS属性进行控制。

如果你遇到了CSS3盒子模型中的边距问题，可能是由于以下几个原因造成的：

外边距合并（Margin Collapsing）：当两个垂直外边距相遇时，它们会合并成一个单一外边距，大小为两者中的较大者，这一现象称为外边距合并。
边框与填充不存在外边距合并：即使填充和边框也不会发生外边距合并。
使用box-sizing属性：可以通过设置box-sizing: border-box;，使元素的实际宽度/高度包含了边框和内边距，从而避免额外的计算。

下面是一个简单的例子，演示如何设置元素的边距，并尝试解决外边距合并问题：




/* 设置元素的边框和填充 */
.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 50px;
  box-sizing: border-box; /* 包含边框和内边距 */
}
 
/* 解决外边距合并问题 */
.box-no-collapse {
  margin: 50px 0; /* 上下的外边距为50px，左右保持默认 */
}




<!-- 外边距合并示例 -->
<div class="box">Box 1</div>
<div class="box">Box 2</div>
 
<!-- 解决外边距合并示例 -->
<div class="box box-no-collapse">Box 3</div>
<div class="box box-no-collapse">Box 4</div>

在这个例子中，.box类定义了一个盒子模型，.box-no-collapse类避免了垂直方向上的外边距合并。第一组盒子（没有应用.box-no-collapse类）会出现外边距合并，而第二组盒子（应用了.box-no-collapse类）则避免了垂直外边距合并，上下方向的外边距分别为50px和0。

- 阅读更多 -

CSS Grid 网格布局详解

System

2024-08-13

所有,css3

CSS Grid 网格布局是一种强大的工具，可以用来创建复杂的布局而不需要使用多个嵌套的 HTML 元素。以下是一个简单的 CSS Grid 布局示例：




<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
  gap: 10px;
}
 
.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  padding: 20px;
}
</style>
</head>
<body>
 
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>
 
</body>
</html>

这个示例中，.grid-container 类定义了一个网格容器，它有三列和两行。grid-template-columns 和 grid-template-rows 属性分别定义了网格的列宽度和行高度。gap 属性定义了网格项之间的间隙。.grid-item 类定义了网格项的样式。这个布局创建了一个有着固定列宽和行高的 6 个方格的网格。

- 阅读更多 -

如何用CSS实现响应式布局

System

2024-08-13

所有,css3

CSS响应式布局是通过媒体查询（Media Queries）来实现不同屏幕尺寸下的布局适配。你可以定义不同的样式规则，针对不同的屏幕宽度。

以下是一个简单的响应式布局示例：




/* 基础样式 */
body {
  font-family: Arial, sans-serif;
}
 
.container {
  padding: 10px;
  margin: 0 auto;
}
 
/* 普通屏幕样式 */
.header, .content, .footer {
  background-color: #f8f8f8;
  border: 1px solid #eee;
  padding: 20px 0;
  text-align: center;
}
 
/* 当屏幕宽度小于或等于768像素时 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 20px;
  }
 
  .header, .content, .footer {
    padding: 10px 0;
  }
}
 
/* 当屏幕宽度在600像素到768像素之间时 */
@media (min-width: 600px) and (max-width: 768px) {
  .container {
    width: 90%;
  }
}
 
/* 更大屏幕的样式 */
@media (min-width: 992px) {
  .container {
    width: 80%;
  }
}
 
/* 超大屏幕的样式 */
@media (min-width: 1200px) {
  .container {
    width: 75%;
  }
}

在这个例子中，.container 类定义了页面内容区域的基础样式。媒体查询规则定义了在不同屏幕尺寸下这个区域的宽度和其他样式。例如，在屏幕宽度小于或等于768像素时，.container 的宽度设置为100%，并且内边距设置为20px。随着屏幕宽度的增加，.container 的宽度和内边距逐渐增大，直到屏幕宽度超过1200像素时，.container 的宽度被设置为75%。

- 阅读更多 -

移动WEB开发flex布局

System

2024-08-13

所有,css3

Flex布局是CSS3中的一种新布局模式，它允许开发者通过简单的CSS属性来控制容器内部组件的排列方式。在移动Web开发中，Flex布局非常实用，因为它可以使应用程序在不同的屏幕尺寸和设备上保持一致的布局。

以下是一个简单的Flex布局示例，它将创建一个水平居中的容器，其中包含三个等宽的子元素：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex; /* 使用Flex布局 */
  justify-content: center; /* 水平居中 */
}
 
.flex-item {
  width: 100px; /* 子元素宽度 */
  height: 100px; /* 子元素高度 */
  margin: 5px; /* 子元素间距 */
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item" style="background-color: cyan;">1</div>
  <div class="flex-item" style="background-color: magenta;">2</div>
  <div class="flex-item" style="background-color: yellow;">3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 类使用 display: flex 属性来指定这个容器使用Flex布局。.flex-item 类定义了子元素的宽度、高度和外边距。justify-content: center 则使得所有子元素在容器中水平居中。

2024-08-13

以下是一个使用纯CSS3实现的水波纹从中心向四周扩散的动画示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Wave Ripple Animation</title>
<style>
  .wave {
    width: 200px;
    height: 200px;
    background: #f0f0f0;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }
 
  .wave::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: rgba(0, 0, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: ripple 5s infinite linear;
  }
 
  @keyframes ripple {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
    }
  }
</style>
</head>
<body>
<div class="wave"></div>
</body>
</html>

这段代码中，.wave 类用于创建一个圆形的容器，.wave::before 伪元素用于创建水波纹的效果。@keyframes ripple 定义了水波纹的动画，从初始的无显示（透明度为0），到水波纹最大（透明度为1）。这个动画是无限循环的，并且以线性的速度进行。

- 阅读更多 -

css3新增属性

System

2024-08-13

所有,css3

CSS3 是最新的 CSS 标准，它引入了许多新特性和改进，以下是一些常见的 CSS3 新增属性：

圆角（border-radius）




div {
  border-radius: 10px;
}

阴影（box-shadow）




div {
  box-shadow: 5px 5px 10px #888888;
}

渐变（gradient）




div {
  background: linear-gradient(to right, red, yellow);
}

变换（transform）




div:hover {
  transform: rotate(360deg);
}

动画（animation）




@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}

多列布局（multi-column layout）




div {
  column-count: 3;
}

用户界面（UI）




input[type="range"] {
  -webkit-appearance: none;
  background: #333;
  height: 10px;
}

2D/3D转换（transform）




div {
  transform: translate(50px, 100px) rotate(360deg) scale(1.5);
}

过渡效果（transition）




div:hover {
  transition: all 0.3s ease-in-out;
}

文字效果（text-effects）




div {
  text-shadow: 2px 2px 2px #888888;
}

这些只是 CSS3 新特性中的一部分，还有许多其他的特性，如伪元素（::before, ::after）、媒体查询（@media）、字体图标（@font-face）等。

- 阅读更多 -

css3 纯代码案例

System

2024-08-13

所有,css3

CSS3提供了许多创造性和效果性的样式，以下是一些使用纯CSS3创建的代码案例：

创建一个简单的加载动画：




.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db; 
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}
 
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

创建一个简单的阴影效果：




div {
  width: 100px;
  height: 100px;
  background: #474747;
  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.6);
}

创建一个渐变背景色：




body {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

创建一个圆角效果：




div {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  border-radius: 25px;
}

创建一个阴影效果：




div {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

创建一个3D旋转效果：




.card {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  margin: 50px;
  perspective: 1000px;
}
 
.card:hover {
  transform: rotateY(180deg);
}

这些都是使用CSS3创建的简单示例，CSS3提供了许多其他复杂的效果和动画，可以用来创建各种各样的网页设计。

- 阅读更多 -

CSS3:网页变美指南

System

2024-08-13

所有,css3

在这个例子中，我们将使用CSS3的一些特性来改善一个简单的网页布局。这里的目标是使用CSS3的动画、渐变和边框效果来增强页面的视觉效果。




/* 设置页面背景为渐变色 */
body {
  background: linear-gradient(to right, #FFB7CE, #FFA79D);
}
 
/* 设置页面中心内容区的样式 */
.content {
  width: 80%;
  margin: auto;
  padding: 50px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
 
/* 设置标题的动画效果 */
h1 {
  color: #333;
  font-size: 3em;
  text-align: center;
  animation: glow 1s ease infinite alternate;
}
 
/* 定义动画 */
@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 90px #ff00de, 0 0 100px #ff00de;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 90px #ff00de, 0 0 100px #ff00de, 0 0 110px #ff00de;
  }
}
 
/* 设置链接的边框 */
a {
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #ff00de;
  margin: 0 10px;
}
 
/* 当鼠标悬停在链接上时，改变边框颜色 */
a:hover {
  border-color: #ff00de;
}

这段CSS代码为一个简单的HTML页面添加了视觉吸引力。它使用渐变背景、边框动画、文本阴影效果以及鼠标悬停效果，为页面提供了更好的视觉体验。

- 阅读更多 -

CSS3--伸缩盒模型——flex布局

System

2024-08-13

所有,css3

伸缩盒模型（Flexible Box Layout），又称flexbox，是CSS3新引入的一种布局模式。它可以使容器内的子元素可以在任何方向上成比例增长或收缩，以最大化空间使用。

以下是flex布局的基本属性：

display: flex; 或 display: inline-flex; 将元素定义为flex容器。
flex-direction 定义了容器内元素的排列方向。
flex-wrap 定义如果一行排不下时，元素如何换行。
flex-flow 是flex-direction和flex-wrap的简写。
justify-content 定义了元素在主轴方向上的对齐方式。
align-items 定义了元素在交叉轴方向上的对齐方式。
align-content 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么这个属性不起作用。

示例代码：




.container {
  display: flex; /* 或者 inline-flex */
  flex-direction: row; /* 或 column, row-reverse, column-reverse */
  flex-wrap: wrap; /* 或 nowrap */
  justify-content: flex-start; /* 或 flex-end, center, space-between, space-around */
  align-items: stretch; /* 或 flex-start, flex-end, center, baseline */
  align-content: stretch; /* 或 flex-start, flex-end, center, space-between, space-around */
}
 
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

HTML结构：




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

以上代码定义了一个flex容器，其中包含三个项目。通过CSS类定义了flex布局的各种特性。

- 阅读更多 -