CSS3新特性

最新推荐文章于 2023-10-05 18:14:07 发布

一头小企鹅

最新推荐文章于 2023-10-05 18:14:07 发布

阅读量76

点赞数 1

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_51273795/article/details/132195148

版权

CSS3新特性

边框

CSS3提供了丰富的边框样式和属性，可以用来装饰HTML元素的边框。下面是一些常用的CSS3边框属性：

border-width：设置边框的宽度，可以使用像素值、百分比或预定义的值（thin、medium、thick）。
例子：border-width: 2px;
border-style：设置边框的样式，常见的样式包括solid（实线）、dotted（点线）、dashed（虚线）等。
例子：border-style: solid;
border-color：设置边框的颜色，可以使用具体的颜色值或预定义的颜色（red、green、blue）。
例子：border-color: #000;
border-radius：设置边框的圆角效果，可以用像素值或百分比表示圆角的半径。
例子：border-radius: 5px;
border-image：使用图片来定义边框的外观，可以设置图片地址、边框宽度、边框切片（border-slice）等属性。
例子：border-image: url(border.png) 30 30 round;

这些属性可以单独使用，也可以组合在一起使用。例如：
border: 2px solid #000;
这个例子设置了边框宽度为2像素，样式为实线，颜色为黑色。

圆角

在CSS3中，你可以使用border-radius属性来设置元素的圆角效果。border-radius属性接受一个或多个值，用于指定四个边角的圆角半径。

使用时可以按照以下方式设置border-radius属性：

单个值：指定所有四个边角的圆角半径。例如，border-radius: 10px; 将四个边角都设置为10像素的圆角。
两个值：第一个值指定左上角和右下角的圆角半径，第二个值指定右上角和左下角的圆角半径。例如，border-radius: 10px 20px; 将左上角和右下角的圆角设置为10像素，右上角和左下角的圆角设置为20像素。
三个值：第一个值指定左上角的圆角半径，第二个值指定右上角和左下角的圆角半径，第三个值指定右下角的圆角半径。例如，border-radius: 10px 20px 30px; 将左上角的圆角设置为10像素，右上角和左下角的圆角设置为20像素，右下角的圆角设置为30像素。
四个值：分别指定左上角、右上角、右下角和左下角的圆角半径。例如，border-radius: 10px 20px 30px 40px; 将左上角的圆角设置为10像素，右上角的圆角设置为20像素，右下角的圆角设置为30像素，左下角的圆角设置为40像素。

此外，你还可以使用百分比值代替像素值，百分比是相对于元素宽度或高度的。例如，border-radius: 50%; 将所有四个边角设置为元素宽度的50%的圆角。

背景

在CSS3中，你可以使用多个属性来设置元素的背景样式。下面是一些常用的CSS3背景属性：

background-color：设置元素的背景色。你可以使用具体的颜色值或者预定义的颜色名称。例如，background-color: #ffffff; 或者 background-color: red;
background-image：设置元素的背景图片。你可以使用图片的相对路径或绝对路径。例如，background-image: url(bg.jpg);
background-repeat：设置背景图片的重复方式。常用的值包括repeat（重复）、repeat-x（水平重复）、repeat-y（垂直重复）和no-repeat（不重复）。例如，background-repeat: repeat;
background-position：设置背景图片的位置。你可以使用关键字（left、center、right、top、bottom）或者像素值、百分比来指定位置。例如，background-position: center;
background-size：设置背景图片的尺寸。你可以使用像素值、百分比或者关键字（cover、contain）来指定尺寸。例如，background-size: cover;
background-attachment：控制背景图片的滚动方式。常用的值有scroll（跟随滚动）、fixed（固定不动）和local（相对于元素滚动）。例如，background-attachment: fixed;
background-clip：指定背景的绘制区域。常用的值有border-box（边框区域绘制）、padding-box（内边距区域绘制）和content-box（内容区域绘制）。例如，background-clip: content-box;

你可以单独使用这些属性，也可以组合在一起使用。例如：

background: #ffffff url(bg.jpg) no-repeat center center;
该例子设置了元素的背景色为白色，背景图片为"bg.jpg"，不重复，居中显示。

渐变

CSS3提供了渐变（Gradients）功能，可以让你创建平滑的过渡效果。你可以使用以下两种类型的渐变：

线性渐变（Linear Gradients）：在两个或多个指定颜色之间创建线性过渡。
径向渐变（Radial Gradients）：从中心向外辐射状地创建颜色渐变。

下面是使用CSS3渐变的示例代码：

线性渐变：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

其中，direction表示渐变的方向，可以使用关键字（to left、to right、to top、to bottom）或者角度（deg、rad、turn）表示。color-stop定义了渐变的颜色和位置，你可以指定多个颜色和位置。

示例：

/* 从上到下的线性渐变 */
background: linear-gradient(to bottom, #ff0000, #0000ff);

/* 从左上到右下的线性渐变 */
background: linear-gradient(45deg, #ff0000, #0000ff);

径向渐变：

background: radial-gradient(shape size at position, start-color, ..., last-color);

其中，shape表示渐变的形状，可以是关键字（circle、ellipse）或者具体的圆形或椭圆形尺寸（px、%）。size表示渐变的尺寸，可以是关键字（closest-side、closest-corner、farthest-side、farthest-corner）或者具体的尺寸（px、%）。position表示渐变的位置，可以使用关键字（center、top、left）或者具体的坐标（px、%）。

示例：

/* 从中心向外辐射的径向渐变 */
background: radial-gradient(circle, #ff0000, #0000ff);

/* 从右下角向外辐射的径向渐变 */
background: radial-gradient(ellipse at 100% 100%, #ff0000, #0000ff);

你还可以在CSS3渐变中使用透明度，将颜色与透明度值结合起来创建更加丰富的效果。

过渡

CSS3过渡（transitions）允许你在元素属性发生改变时，创建平滑的过渡效果。通过设置过渡属性，你可以指定哪些属性在发生改变时要应用过渡效果，以及过渡的持续时间和其他属性的设置。

下面是使用CSS3过渡的示例代码：

transition: property duration timing-function delay;

其中，property表示要应用过渡效果的属性名称，可以是单个属性或多个属性的组合，例如width、background-color、opacity等。

duration表示过渡的持续时间，可以使用秒（s）或毫秒（ms）作为单位。

timing-function表示过渡的时间函数，用于控制过渡的速度曲线。常用的值包括：ease（默认，慢慢加速，然后慢慢减速）、linear（匀速）、ease-in（慢慢加速）、ease-out（慢慢减速）和ease-in-out（慢慢加速，然后慢慢减速）等。

delay表示过渡的延迟时间，在改变属性之前等待的时间。可以使用秒（s）或毫秒（ms）作为单位。

示例：

/* 在宽度改变时应用过渡效果，持续时间为0.5秒 */
transition: width 0.5s;

/* 在宽度和背景颜色同时改变时应用过渡效果，持续时间为1秒，使用ease-in-out时间函数 */
transition: width 1s ease-in-out, background-color 1s ease-in-out;

/* 在宽度改变时应用过渡效果，持续时间为0.5秒，延迟0.2秒 */
transition: width 0.5s 0.2s;

你还可以使用transition-property、transition-duration、transition-timing-function和transition-delay分别单独设置过渡属性的值。

通过使用过渡，你可以创建平滑的动画效果，提升用户体验，并使页面显示更加流畅。

动画

CSS3动画允许您通过在样式表中定义动画属性来为元素添加动画效果。以下是一个简单的示例，演示了如何使用CSS3动画创建一个旋转的方块：

HTML:

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

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: rotate;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在上面的例子中，我们首先定义了一个类名为"box"的<div>元素。然后，我们在样式表中对这个类名定义了一些属性。

.box类具有一个初始的宽度和高度，而且背景颜色是红色的。我们使用animation-name属性指定了动画的名称，这里是"rotate"。animation-duration属性指定了动画的持续时间，这里是3秒。animation-timing-function属性用于指定动画的时间曲线，这里是线性的。animation-iteration-count属性定义了动画的循环次数，这里是无限循环。

接下来，我们使用@keyframes关键字定义了动画的关键帧。在这个例子中，我们定义了两个关键帧，一个是初始状态(from)，一个是结束状态(to)。在这两个关键帧中，我们使用transform属性来旋转方块。初始状态是0度的旋转角度，结束状态是360度的旋转角度。

通过这样的CSS3动画，我们可以在浏览器中看到一个旋转的红色方块。

请注意，CSS3动画还有很多其他属性和可能的值，用于控制动画的细节。这只是一个简单的示例，可以根据需要进行更复杂和多样化的动画效果。

文本效果

使用CSS3，您可以为文本添加各种视觉效果。以下是几个常用的CSS3文本效果示例：

文字阴影（Text Shadow）：

.text-shadow {
  text-shadow: 2px 2px 4px #000000;
}

在上述示例中，text-shadow属性用于向文本添加阴影效果。通过设置属性的值，您可以指定阴影的偏移量、模糊半径和颜色。

文字渐变（Text Gradient）：

.text-gradient {
  background: -webkit-linear-gradient(#e66465, #9198e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

在上述示例中，利用-webkit-linear-gradient属性将文本的背景渐变为两种不同的颜色。通过设置-webkit-background-clip属性为text，使得渐变效果仅应用于文本的区域。同时，通过设置-webkit-text-fill-color属性为transparent，使得文本本身的颜色透明，以显示出背后的渐变效果。

文字描边（Text Stroke）：

.text-stroke {
  -webkit-text-stroke: 2px #000000;
  color: #ffffff;
}

在上述示例中，-webkit-text-stroke属性用于为文本添加描边效果。通过设置属性的值，您可以指定描边的宽度和颜色。此外，为了确保描边效果能够显示出来，设置文本的颜色为背景所不同的颜色。

文字动画（Text Animation）：

@keyframes text-animation {
  0% {
    letter-spacing: 0;
  }
  50% {
    letter-spacing: 10px;
  }
  100% {
    letter-spacing: 0;
  }
}

.text-animation {
  animation-name: text-animation;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

在上述示例中，通过使用@keyframes关键字定义了一个文本动画的关键帧序列。在不同的关键帧中，通过调整letter-spacing属性的值，控制文本的字符间距，从而实现动画效果。然后，通过应用animation-name、animation-duration、animation-timing-function和animation-iteration-count等动画属性，将此动画应用于指定的文本。

以上是一些常见的CSS3文本效果示例，当然还有其他更多的效果可供探索。可以根据需要调整属性值和样式，以创建符合您设计目标的文本效果。

2D转换

CSS3提供了许多可用于对元素进行2D转换的属性。下面是常用的几个2D转换属性及其示例：

平移（Translation）：

.translation {
  transform: translate(50px, 100px);
}

在上述示例中，transform属性用于对元素进行平移。通过设置属性的值为translate(x, y)，其中x和y表示水平和垂直方向上的平移距离，可以使元素相对于其原始位置进行移动。

缩放（Scale）：

.scale {
  transform: scale(1.5);
}

在上述示例中，transform属性用于对元素进行缩放。通过设置属性的值为scale(n)，其中n表示缩放的比例，可以使元素相对于其原始大小进行缩放。

旋转（Rotation）：

.rotation {
  transform: rotate(45deg);
}

在上述示例中，transform属性用于对元素进行旋转。通过设置属性的值为rotate(angle)，其中angle表示旋转的角度，可以使元素相对于其原始方向进行旋转。

倾斜（Skew）：

.skew {
  transform: skew(20deg, 10deg);
}

在上述示例中，transform属性用于对元素进行倾斜。通过设置属性的值为skew(x-angle, y-angle)，其中x-angle和y-angle表示水平和垂直方向上的倾斜角度，可以使元素相对于其原始状态进行倾斜。

综合应用多个转换：

.combined {
  transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}

在上述示例中，transform属性可以同时应用多个转换效果。通过将多个转换函数连接起来，可以同时对元素进行平移、旋转和缩放等多个转换。

不同的转换属性可以组合使用，您可以根据需求对元素进行独特的2D转换效果。同时，还可以结合过渡（transition）和动画（animation）等属性，使2D转换的效果更加平滑和有趣。

3D转换

CSS3提供了一些属性来实现3D转换，使元素在三维空间内进行变换。以下是几个常用的CSS3 3D转换属性及其示例：

3D平移（Translation）：

.translation {
  transform: translate3d(100px, 50px, 0);
}

在上述示例中，transform属性用于对元素进行3D平移。通过设置translate3d(x, y, z)，其中x、y和z分别表示元素在X、Y和Z轴上的平移距离。这样可以使元素相对于其原始位置在3D空间中移动。

3D旋转（Rotation）：

.rotation {
  transform: rotateX(45deg) rotateY(30deg) rotateZ(60deg);
}

在上述示例中，transform属性用于对元素进行3D旋转。通过设置rotateX(angle)、rotateY(angle)和rotateZ(angle)，其中angle表示绕X、Y和Z轴旋转的角度，可以使元素相对于其原始方向进行3D旋转。

3D缩放（Scale）：

.scale {
  transform: scale3d(1.5, 1.5, 1.5);
}

在上述示例中，transform属性用于对元素进行3D缩放。通过设置scale3d(x, y, z)，其中x、y和z分别表示元素在X、Y和Z轴上的缩放比例，可以使元素相对于其原始大小进行3D缩放。

3D倾斜（Skew）：

.skew {
  transform: skewX(20deg) skewY(10deg);
}

在上述示例中，transform属性用于对元素进行3D倾斜。通过设置skewX(angle)和skewY(angle)，其中angle表示绕X和Y轴的倾斜角度，可以使元素相对于其原始状态进行3D倾斜。

3D透视（Perspective）：

.container {
  perspective: 500px;
}

.child {
  transform: rotateY(45deg);
}

在上述示例中，通过perspective属性为容器元素设置透视效果。通过设置透视的值，可以模拟3D空间投射效果。然后，通过transform属性为子元素设置3D旋转。这样可以创建出逼真的3D效果。

这些是几个常用的CSS3 3D转换属性，可以根据需要和创意，结合使用不同的转换属性和值，创建出丰富多样的3D转换效果。同时，结合过渡（transition）和动画（animation）等属性，可以使3D转换的过程更加平滑和动态。

Flex布局

Flex布局（Flexbox）是CSS3中提供的一种用于创建灵活的、自适应的布局模型。它使得元素在容器中能够动态地伸缩、对齐和分布空间。

使用Flex布局，需要在容器上应用display: flex或display: inline-flex属性。以下是Flex布局的一些基本属性：

主轴（Main Axis）和交叉轴（Cross Axis）：
Flex布局采用了主轴和交叉轴的概念。主轴是元素的排列方向，可通过flex-direction属性来指定。默认值是row，表示横向排列，还有column表示纵向排列。交叉轴则与主轴垂直。
容器属性：

flex-direction：设置主轴的方向，可以是row（默认值）、column、row-reverse或column-reverse。
flex-wrap：控制容器内的元素是否换行，可选值为nowrap（默认值，不换行）、wrap和wrap-reverse。
justify-content：定义了在主轴上如何对齐元素，可选值有flex-start（默认值，靠近主轴起点对齐）、flex-end（靠近主轴末端对齐）、center（居中对齐）、space-between（两端对齐，元素之间间隔均匀）和space-around（元素周围间隔均匀）等。
align-items：定义了在交叉轴上如何对齐元素，可选值有flex-start、flex-end、center、baseline（基线对齐，元素的基线对齐）和stretch（默认值，拉伸以填充容器）等。
align-content：定义了多行或多列的元素在交叉轴上如何对齐和分布空间，可选值有flex-start、flex-end、center、space-between、space-around和stretch（默认值）等。

项目属性：

flex：设置了项目的伸缩性，可以根据比例分配剩余空间，由三个值组成：flex-grow、flex-shrink和flex-basis。例如，flex: 1 1 auto表示项目将等分剩余空间。
align-self：与align-items类似，但可以单独为个别项目设置交叉轴上的对齐方式，可选值有auto（默认值）、flex-start、flex-end、center、baseline和stretch等。