1. 首页
  2. 分类
  3. css3
CSS3设置圆角化
System
2024-08-15
所有,css3

CSS3提供了border-radius属性，可以用来创建圆角。

基本语法如下：




/* 所有四个角的圆角 */
border-radius: 10px;
 
/* 分别设置四个角的圆角 */
border-radius: 10px 20px 30px 40px;
 
/* 分别设置水平和垂直半径 */
border-radius: 10px 20px;
 
/* 分别设置左上角和右下角、右上角和左下角的圆角 */
border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
 
/* 分别设置四个角的圆角（水平半径和垂直半径） */
border-radius: 10px 20px 30px 40px / 50px;

实例代码：




.box {
  width: 200px;
  height: 100px;
  background-color: skyblue;
  border-radius: 15px; /* 所有角都是15px的圆角 */
}

HTML部分：




<div class="box"></div>

这段代码会创建一个宽度为200px、高度为100px的蓝色方块，四个角都被圆角化为15px的圆角。

- 阅读更多 -
flex布局居中
System
2024-08-15
所有,css3

在Flex布局中，要使容器内的子元素水平和垂直居中，可以将容器的justify-content属性设置为center（水平居中）和align-items属性设置为center（垂直居中）。

以下是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 使用视口高度 */
}
 
.flex-item {
  width: 50px;
  height: 50px;
  background-color: red;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item"></div>
</div>
 
</body>
</html>

在这个例子中，.flex-container是一个Flex容器，它使用了Flex布局来居中它的子元素.flex-item。通过设置justify-content和align-items，子元素在水平和垂直方向上都被居中。

- 阅读更多 -
CSS3 新增属性（边框，背景，文字，真香
System
2024-08-15
所有,css3

CSS3 中有许多新增的属性，以下是一些常见的：

  1. 边框（borders）:

    • border-radius: 创建圆角边框。
    • border-image: 使用图片作为边框。

  2. 背景（backgrounds）:

    • background-size: 背景图片的尺寸。
    • background-origin: 背景图片的定位区域。
    • background-clip: 背景的裁剪区域。

  3. 文字（text）:

    • text-shadow: 文字阴影。
    • word-wrap: 自动换行。
    • text-overflow: 文字溢出时的处理。

  4. 转换（transforms）:

    • transform: 包括旋转（rotate）、缩放（scale）、移动（translate）、倾斜（skew）等功能。

  5. 动画（animations）:

    • @keyframes: 定义动画序列。
    • animation: 应用动画到元素上。

  6. 伪类（pseudo-classes）和伪元素（pseudo-elements）:

    • :first-child, :last-child, :nth-child() 等用于选择特定元素。
    • ::before, ::after 用于在元素前后添加内容。

  7. 用户界面（user interface）:

    • resize: 控制元素是否可调整大小。
    • box-sizing: 控制元素的盒模型的计算方式。

  8. 多列（multi-column）:

    • column-count, column-gap, column-rule 等用于多列布局。

  9. 过渡（transitions）:

    • transition: 变换属性的过渡效果。

这些是CSS3中的一些常用属性，具体使用时需要根据具体场景来选择。

示例代码：




/* 圆角边框 */
div {
  border: 2px solid #000;
  border-radius: 10px; /* 创建圆角 */
}
 
/* 背景尺寸 */
div {
  background-image: url('image.jpg');
  background-size: cover; /* 背景图片覆盖整个元素 */
}
 
/* 文字阴影 */
p {
  color: #333;
  text-shadow: 2px 2px 2px #aaa; /* 文字阴影效果 */
}
 
/* 关键帧动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
/* 应用动画 */
div {
  animation: example 4s infinite;
}
 
/* 伪元素添加内容 */
p::before {
  content: "#";
  color: blue;
}
 
/* 可调整大小的文本框 */
input[type="text"] {
  resize: both;
  overflow: auto;
}
 
/* 多列布局 */
div {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}
 
/* 属性过渡效果 */
div {
  transition: background-color 0.5s ease-in-out;
}
- 阅读更多 -
CSS背景属性之颜色渐变
System
2024-08-15
所有,css3

CSS背景属性之颜色渐变可以使用线性渐变或径向渐变。以下是两种渐变的示例代码：

  1. 线性渐变（从上到下）：



.linear-gradient {
  background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}
  1. 径向渐变（从中心到边缘）：



.radial-gradient {
  background: radial-gradient(circle, #ff99cc 0%, #33ccff 100%);
}

这些CSS类可以直接应用于HTML元素，为其提供渐变背景效果。

- 阅读更多 -
flex:布局下，只针对 flex:1布局下文字超出省略号显示无效解决方案
System
2024-08-15
所有,css3

要在Flex布局下实现文本超出省略号显示，需要确保容器有足够的空间来包含内容，并且设置overflow: hidden; 属性来隐藏溢出的内容，然后使用 text-overflow: ellipsis; 属性和 white-space: nowrap; 属性来实现省略号的效果。

以下是一个简单的例子：




.container {
  display: flex; /* 使用Flex布局 */
  width: 100%; /* 容器宽度 */
}
 
.item {
  flex: 1; /* 占据等分空间 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 文本超出部分显示省略号 */
  white-space: nowrap; /* 文本不换行 */
}



<div class="container">
  <div class="item">这是一段很长的文本，需要显示省略号</div>
  <!-- 其他flex项目 -->
</div>

在这个例子中，.container 是一个Flex容器，.item 是其中一个flex项，该项通过设置 flex: 1 占据了等分的空间。文本超出容器宽度时，会以省略号的形式显示，这是因为 overflow: hidden;、text-overflow: ellipsis; 和 white-space: nowrap; 的组合作用。

- 阅读更多 -
CSS布局：Flex布局
System
2024-08-15
所有,css3

Flexbox布局是CSS中的一种布局模型，可以简化复杂的布局，并在不同尺寸的屏幕上提供一致的用户体验。

以下是一个简单的Flex布局示例，它将创建一个水平的导航菜单：




.nav {
  display: flex; /* 使用Flex布局 */
  list-style-type: none; /* 移除列表的标记 */
  padding: 0; /* 移除默认的内边距 */
  margin: 0; /* 移除默认的外边距 */
}
 
.nav li {
  padding: 10px; /* 添加内边距 */
}
 
.nav li:hover {
  background-color: #f0f0f0; /* 鼠标悬停时的背景色 */
}



<ul class="nav">
  <li>首页</li>
  <li>产品</li>
  <li>关于</li>
  <li>联系</li>
</ul>

这个Flex布局会使得<li>元素在容器.nav中水平排列。当鼠标悬停在某个<li>元素上时，会有背景色的变化，提供了一定的用户反馈。

- 阅读更多 -
HTML爱心照片墙源码
System
2024-08-15
所有,css3

以下是一个简单的HTML爱心照片墙的示例代码。这个示例使用了HTML和CSS来创建一个网页，其中包含了一系列的爱心图片。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heart Photo Wall</title>
<style>
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f7f7f7;
  }
  .photo-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  .photo-wall img {
    margin: 10px;
    width: 150px;
    height: 150px;
    object-fit: contain;
  }
</style>
</head>
<body>
 
<div class="photo-wall">
  <img src="heart1.jpg" alt="Heart Photo 1">
  <img src="heart2.jpg" alt="Heart Photo 2">
  <img src="heart3.jpg" alt="Heart Photo 3">
  <!-- Add more images as needed -->
</div>
 
</body>
</html>

在这个示例中，.photo-wall 类使用了flexbox布局来排列照片，img 元素设置了统一的样式。你需要将 heart1.jpg, heart2.jpg, heart3.jpg 替换成实际的图片文件名。如果有更多的图片，你可以继续添加 <img src="..." alt="Heart Photo X"> 到 .photo-wall 容器中。这个示例提供了一个简单的起点，你可以根据需要添加更多的样式和功能。

- 阅读更多 -
使用css实现边框流动效果
System
2024-08-15
所有,css3

要使用CSS实现边框流动效果，可以通过关键帧（keyframes）和动画（animations）属性来完成。以下是一个简单的例子，展示如何为一个元素添加边框流动的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Flow Effect</title>
<style>
  .border-flow {
    width: 200px;
    height: 50px;
    position: relative;
    background-color: #f0f0f0;
    margin: 20px;
    border-radius: 10px;
    animation: flow 2s infinite alternate;
  }
 
  .border-flow::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #333;
    border-radius: inherit;
    animation: flow-border 2s infinite alternate;
  }
 
  @keyframes flow {
    0% {
      box-shadow: 0 0 10px #333;
    }
    100% {
      box-shadow: 0 0 20px #333;
    }
  }
 
  @keyframes flow-border {
    0% {
      border-color: #333;
    }
    100% {
      border-color: #f0f0f0;
    }
  }
</style>
</head>
<body>
<div class="border-flow"></div>
</body>
</html>

在这个例子中，.border-flow 类创建了一个带有背景色和圆角的盒子，并且使用 ::before 伪元素来创建一个边框。animation 属性用于应用流动效果，@keyframes flow 和 @keyframes flow-border 定义了这个动画的关键帧。动画效果通过改变盒子的 box-shadow 和伪元素的 border-color 来实现，从而模拟出边框流动的视觉效果。

- 阅读更多 -
[HTML]Web前端开发技术2（HTMLCSSJavaScript ）格式化文本标记，定义列表，＜blockquote＞，definition description，ruby——喵喵画网页
System
2024-08-15
所有,css3

在HTML中，可以使用<blockquote>标签来表示一块引用自其他来源的文本。通常，这些文本会以斜体显示，并且还可以添加一个引号标记（通常是一个大的引号字符）来表示这是一个引用。

下面是一个使用<blockquote>的例子：




<blockquote>
  这是一个示例引用。这段文本将以斜体显示，并且在左右两边有装饰性的引号。
</blockquote>

在CSS中，可以使用::before和::after伪元素来添加引号标记。下面是一个简单的CSS样式示例，它将给<blockquote>添加装饰性的引号：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blockquote Example</title>
<style>
blockquote {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  margin: 20px 0;
  padding: 10px 20px;
  position: relative;
  quotes: '" "' '';
}
 
blockquote::before {
  content: open-quote;
  position: absolute;
  left: 5px;
  top: 5px;
  color: #666;
  font-size: 3em;
}
 
blockquote::after {
  content: close-quote;
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: #666;
  font-size: 3em;
}
</style>
</head>
<body>
<blockquote>
  这是一个示例引用。这段文本将以斜体显示，并且在左右两边有装饰性的引号。
</blockquote>
</body>
</html>

在这个例子中，blockquote选择器定义了块引用的基本样式，而blockquote::before和blockquote::after伪元素分别添加了开始和结束的引号。content属性使用了open-quote和close-quote值，它们引用了quotes属性定义的值。

- 阅读更多 -
嵌套的子元素多层flex：1以后不生效
System
2024-08-15
所有,css3

当你在CSS中使用flexbox布局时，如果你在父元素上设置了flex: 1，而子元素也设置了flex: 1，你可能会期望子元素会占据父元素的1/4（如果有4个兄弟元素）。但如果子元素自身又包含了其他元素，并且这些元素也设置了flex: 1，那么这些元素可能不会按照你的预期工作。

这是因为flex: 1只在直接子元素之间分配可用空间。如果子元素包含了嵌套的子元素，并且这些嵌套的子元素也设置了flex: 1，则它们只会相对于它们的同级元素进行伸缩，而不会跨越多层嵌套。

解决方法：

  1. 确保每个需要伸缩的元素都是直接子元素。
  2. 如果你需要在多层嵌套中使用flex布局，你可以使用flex-grow、flex-shrink和flex-basis属性来更精细地控制伸缩行为。

例如，使用flex-grow属性而不是flex shorthand：




.grandchild {
  flex-grow: 1;
}

这样可以确保所有的子孙元素（grandchild）都会在父元素中均等分配可用空间。

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