CSS3 新特性 - 技术栈

文章目录

选择器
[圆角效果 - border-radius](#圆角效果 - border-radius)
[阴影效果 - box-shadow](#阴影效果 - box-shadow)
[渐变效果 - linear-gradient()](#渐变效果 - linear-gradient())
[形变效果 - transform](#形变效果 - transform)
[过渡效果 - transition](#过渡效果 - transition)
[动画效果 - animation](#动画效果 - animation)
[媒体查询 - @media](#媒体查询 - @media)
[弹性盒子布局 - flex](#弹性盒子布局 - flex)
[网格布局 - grid](#网格布局 - grid)
背景效果
- [1. 多背景图](#1. 多背景图)
- [2. 背景裁剪](#2. 背景裁剪)
- [3. 透明效果](#3. 透明效果)

CSS3中引入了许多令人兴奋的新特性，这些特性使得开发者能够创建更丰富、更动态和更响应式的网页。

选择器

属性选择器 ：允许你根据元素的属性值来选择元素，例如 [attribute]、[attribute=value]、[attribute~=value]、[attribute|=value] 等。

css 复制代码

/* 选择所有带有 title 属性的元素 */
[title] {
  color: blue;
}

/* 选择 title 属性值为 "example" 的元素 */
[title="example"] {
  font-weight: bold;
}

伪类选择器 ：允许你根据元素的状态或位置来选择元素，例如 :hover、:focus、:nth-child()、:not() 等

css 复制代码

/* 鼠标悬停时改变元素的背景颜色 */
button:hover {
  background-color: lightgray;
}

/* 选择第一个段落元素 */
p:first-child {
  font-weight: bold;
}

圆角效果 - border-radius

border-radius：为元素的边框创建圆角效果，从而替代了以往需要多个图片拼接实现的方式。

css 复制代码

#example1 {
  border: 2px solid red;
  border-radius: 25px;
}
 
#example2 {
  border: 2px solid red;
  border-radius: 50px 20px;
}

阴影效果 - box-shadow

box-shadow、text-shadow：为元素的背景和文本添加阴影效果。

css 复制代码

button {  
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */  
}

渐变效果 - linear-gradient()

linear-gradient()：线性渐变和径向渐变，可以在元素的背景中创建平滑的颜色过渡效果。

css 复制代码

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

css 复制代码

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

形变效果 - transform

transform：应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，倾斜，偏移等。

css 复制代码

div
{
    transform: rotate(45deg); // 旋转45°
    transform: scale(2, 0.5); // X轴缩放2 Y轴缩放0.5
    transform: skew(30deg, 45deg); // X轴倾斜30  Y轴倾斜45
    transform: translate(45px, 50%); // X轴偏移45px Y轴偏移50%
}

过渡效果 - transition

transition：元素在状态改变时（如hover时颜色改变）能够平滑地过渡属性值。

css 复制代码

div {  
  background-color: red;  
  transition: background-color 0.5s ease; /* 0.5秒内平滑过渡 */  
}  
div:hover {  
  background-color: blue;  
}

动画效果 - animation

@keyframes ：可以创建动画，通过逐步改变从一个CSS样式设定到另一个。
animation：应用动画

在动画过程中，可以更改CSS样式的设定多次。

指定的变化时发生时使用％，0％是开头动画，100％是当动画完成，或关键字"from"和"to"

css 复制代码

@keyframes moveRight {  
  0% { left: 0; }  
  100% { left: 200px; }  
}  

div {  
  position: relative;  
  animation: moveRight 2s; /* 应用动画  2秒内从左边移动到右边 */  
}

媒体查询 - @media

@media：根据设备的特性（如屏幕宽度）来应用不同的样式规则，是实现响应式设计。

可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

css 复制代码

.example {
    padding: 20px;
    color: white;
}
/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
    .example {background: red;}
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}

也可以针对不同的媒体使用不同样式文件 :

html 复制代码

<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

弹性盒子布局 - flex

flex布局

网格布局 - grid

grid布局

背景效果

1. 多背景图

一个元素可以同时设置多个背景图像

css 复制代码

div {  
  background-image: url('image1.jpg'), url('image2.png'); /* 设置两个背景图像 */  
}

2. 背景裁剪

background-clip：它决定了背景图像或颜色应该被裁剪到哪个区域

border-box：背景被裁剪到边框盒，即边框以内的区域。
padding-box：背景被裁剪到内边距框，即padding以内的区域。
content-box：背景被裁剪到内容框，即内容以内的区域。

css 复制代码

/* 假设我们有一个类名为 .box 的元素 */  
.box {  
  width: 200px;  
  height: 200px;  
  padding: 20px;  
  border: 10px solid black;  
    
  /* 设置背景图像 */  
  background-image: url('path/to/your/image.jpg');  
    
  /* 设置背景裁剪区域为内容框 */  
  background-clip: content-box;  
}

3. 透明效果

rgba颜色模式：分为两部分，rgb为颜色值，a为透明度

css 复制代码

div {  
  background-color: rgba(255, 0, 0, 0.5); /* 半透明的红色 */  
}

hsla：分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

设置一个背景颜色为绿色（色相120度），50%的饱和度，75%的亮度，并且半透明（透明度0.5）的元素：

css 复制代码

.element {  
  background: hsla(120, 50%, 75%, 0.5);  
}

opacity：指定不透明度。从0.0（完全透明）到1.0（完全不透明）

css 复制代码

div2{
	opacity:0.5
}