CSS3新增样式2

最新推荐文章于 2024-11-03 23:12:06 发布
最新推荐文章于 2024-11-03 23:12:06 发布
阅读量47 收藏
点赞数 1
文章标签： css3 前端 css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64204485/article/details/132063835
版权

续CSS3新增样式

文章标题

六丶动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

6.1 什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

6.2 @keyframes 规则

如果你在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。 要使动画生效，必须将动画绑定到某个元素。

/* 动画代码 */
@keyframes example1 {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
/* 应用动画的元素 */
.example1 {
	animation-name: example1;
	animation-duration: 4s;
}

animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字“from”和“to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改 变。

你也可以使用百分比值。通过使用百分比，你可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 <div> 元素的背景颜色：

/* 动画代码 */
@keyframes example2 {
	0% {
		background-color: red;
	}
	25% {
		background-color: yellow;
	}
	50% {
		background-color: blue;
	}
	100% {
		background-color: green;
	}
}
/* 应用动画的元素 */
.example2 {
	animation-name: example2;
	animation-duration: 4s;
}

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改背景颜色和 <div>元素的位置：

/* 动画代码 */
@keyframes example3 {
	0% {
		background-color: red;
		left: 0px;
		top: 0px;
	}
	25% {
		background-color: yellow;
		left: 200px;
		top: 0px;
	}
	50% {
		background-color: blue;
		left: 200px;
		top: 200px;
	}
	75% {
		background-color: green;
		left: 0px;
		top: 200px;
	}
	100% {
		background-color: red;
		left: 0px;
		top: 0px;
	}
}
/* 应用动画的元素 */
.example3 {
	animation-name: example3;
	animation-duration: 4s;
}

6.3 延迟动画

animation-delay属性规定动画开始的延迟时间。

示例1：

div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
}
@keyframes example1 {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
.example1 {
	animation-name: example1;
	animation-duration: 4s;
	animation-delay: 2s;
}

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

示例2：

@keyframes example2 {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
.example2 {
	animation-name: example2;
	animation-duration: 4s;
	animation-delay: -2s;
}

6.4 运行次数

animation-iteration-count属性指定动画应运行的次数。

实例：

@keyframes example {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: 3;
}

6.5 反向或交替运行动画

animation-direction属性指定是向前播放、向后播放还是交替播放动画。

  • animation-direction属性可接受以下值：
  • normal - 动画正常播放（向前）。默认值
  • reverse - 动画以反方向播放（向后）
  • alternate - 动画先向前播放，然后向后
  • alternate-reverse - 动画先向后播放，然后向前

实例：

div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
	animation-direction: reverse;
}

6.6 速度曲线

animation-timing-function属性规定动画的速度曲线。

animation-timing-function属性可接受以下值：

  • ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）

  • linear - 规定从开始到结束的速度相同的动画

  • ease-in - 规定慢速开始的动画

  • ease-out - 规定慢速结束的动画

  • ease-in-out指定开始和结束较慢的动画

  • cubic-bezier(*n*,*n*,*n*,*n*)运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：

div {
	width: 200px;
	height: 50px;
	color: white;
	text-align: center;
	position: relative;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
}
@keyframes example {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
.example1 {
	animation-timing-function: linear;
}
.example2 {
	animation-timing-function: ease;
}
.example3 {
	animation-timing-function: ease-in;
}
.example4 {
	animation-timing-function: ease-out;
}
.example5 {
	animation-timing-function: ease-in-out;
}

6.7 填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。 animation-fill-mode 属性能够覆 盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。 animation-fill-mode 属性可接受以下值：

  • none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
  • forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iterationcount）。
  • backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保 留该值。
  • both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
@keyframes example {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
	animation-fill-mode: forwards;
}

6.8 简写属性

实例：

div {
	animation-name: example;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

以上样式可以简写为：

div {
	animation: example 4s linear 2s infinite alternate;
}

七丶文本效果

7.1 文本阴影

CSS3 中， text-shadow 属性适用于文本阴影。

实例：

.text-shadow {
	padding: 10px;
	text-shadow: 5px 5px 5px #FF0000;
}

7.2 盒子阴影

CSS3 中 CSS3 box-shadow 属性适用于盒子阴影。

实例：

.box-shadow {
	padding: 10px;
	box-shadow: 10px 10px 5px #999999;
}

7.3 在伪元素中添加阴影效果

.shadow {
	width: 400px;
	padding: 10px;
	background: white;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
	position: relative;
}
.shadow img {
	border: 1px solid #8a4419;
	border-style: inset;
}
.shadow::after {
    content: '';
    position: absolute;
	width: 70%;
	height: 100px;
	left: 15%;
	bottom: 0;
	z-index: -1;
	box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
}

在这里插入图片描述

7.4 卡片效果

.card {
	width: 250px;
	height: 200px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 	20px 0 rgba(0, 0, 0, 0.19);
}
.card h2 {
	margin: 0;
	width: 250px;
	height: 150px;
	color: white;
	font-size: 30px;
	text-align: center;
	line-height: 150px;
	background-color: #4CAF50;
}
.card p {
	margin: 0;
	width: 250px;
	height: 50px;
	font-size: 20px;
	text-align: center;
	line-height: 50px;
}

在这里插入图片描述

7.5 文本溢出

7.5.1 单行文本溢出

.box{
    width: 200px;
    background: pink;
    overflow: hidden;/* 溢出隐藏 */
    text-overflow: ellipsis;/* 出现省略号 */
    white-space: nowrap;/* 不折行 */
}

7.5.2 多行文本溢出

.box2{
    width: 200px;
    background-color: greenyellow;
    overflow: hidden;/* 溢出隐藏 */
    text-overflow: ellipsis;/* 出现省略号 */
    display: -webkit-box;/* 设置弹性盒子 */
    -webkit-line-clamp: 3;/* 限制行数 */
    -webkit-box-orient: vertical;/* 设置或检索伸缩盒子对象的子元素的排列方式 */
}
/* 兼容性问题，低版本的IE采用伪元素加...   用定位的方法加省略号，定位到右下角 */

7.6 CSS3字体(服务器端字体)

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

<style>
@font-face {
font-family: myFirstFont;
	src: url(sansation_light.woff);
}
div {
	font-family:myFirstFont;
}
</style>

八丶2D转换

8.1 平移（translate）

使用translate()函数可以将元素沿着X轴和Y轴进行水平和垂直平移。语法如下：

transform: translate(x, y);

其中，x和y是水平和垂直方向的平移距离，可以使用像素（px）、百分比（%）或其他单位。

8.2 缩放（scale）

使用scale()函数可以对元素进行水平和垂直方向的缩放。语法如下：

transform: scale(x, y);

其中，x和y分别是水平和垂直方向的缩放比例。如果只指定一个值，则表示同时在水平和垂直方向上等比例缩放。

8.3 旋转（rotate）

使用rotate()函数可以对元素进行旋转。语法如下：

transform: rotate(angle);

其中，angle表示旋转的角度，可以使用度数（deg）或弧度（rad）作为单位。

8.4 倾斜（skew）

使用skew()函数可以对元素进行水平和垂直方向的倾斜。语法如下：

transform: skew(x-angle, y-angle);

其中，x-angle和y-angle分别表示水平和垂直方向的倾斜角度，可以使用度数（deg）或弧度（rad）作为单位。

8.5 多值写法

如果想同时让一个元素进行放大和旋转就需要使用多值写法：

transform: rotate(angle) transform: scale(x, y);

注意中间不能写逗号

8.6 矩阵变形（混合写法）（matrix）

使用matrix()函数可以通过一个4x4的矩阵来对元素进行任意的变形。语法如下：

transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

九丶3D转换

CSS3中也支持3D转换

X轴：水平向右，X右边是正值，左边是负值。

Y轴：垂直向下，Y下面是正值，上面是负值。

Z轴：垂直屏幕，往外面是正值，往里面是负值。

通过 CSS transform 属性，你可以使用以下 3D 转换方法：

  • rotateX()
  • rotateY()
  • rotateZ()

9.1 rotateX() 方法

rotateX()方法使元素绕其 X 轴旋转给定角度。

实例：

.rotateX {
	transform: rotateX(150deg);
}

效果：

在这里插入图片描述

9.2 rotateY() 方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度。

.rotateY {
	transform: rotateY(130deg);
}

在这里插入图片描述

9.3 rotateZ() 方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度。

.rotateZ {
	transform: rotateZ(90deg);
}

在这里插入图片描述

9.4 透视

perspective 指定了观察者与 z = 0 平面的距离，使具有三维位置变换的元素产生透视效果。 简单理解就是将电脑屏幕当做一个平面，用户眼睛到屏幕的垂直方向。值越大用户与屏幕距离越远，视觉效果很小； 值越小，3D 效果就越明显

在这里插入图片描述

div{
perspective：none | <length>
}

10 Flex 布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方 便，比如，垂直居中就不容易实现。

2009 年，W3C 提出了一种新的方案—— Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得 到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能

10.1 Flex 布局是什么

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。

.box{
	display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
	display: inline-flex;
}

10.2 基本概念

采用 Flex 布局的元素，称为 Flex 容器 （flex container），简称 容器 。它的所有子元素自动成为容器成员，称为 Flex 项目 （flex item），简称项目 。

在这里插入图片描述

容器默认存在两根轴：

水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉 点）叫做 main start，结束位置叫做 main end；

项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

10.3 容器的属性

以下 6 个属性设置在容器上：

  • flex-direction：决定主轴的方向。
  • flex-wrap：如果一条轴线排不下，如何换行。
  • flex-flow：flex-direction 属性和 flex-wrap 属性的简写属性。
  • justify-content：定义项目在主轴上的对齐方式。
  • align-items：定义项目在交叉轴上如何对齐。
  • align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

10.3.1 flex-direction属性

flex-direction 属性决定主轴的方向（即项目的排列方向）。

语法：

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:

  • row：横向从左到右排列（左对齐），默认的排列方式。
  • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  • column：纵向排列。
  • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

以下实例演示了 column 的使用:

在这里插入图片描述

代码：

.flex-container {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

其余两个不常用不再做演示

10.3.2 justify-content 属性

justify-content 属性定义了项目在主轴上的对齐方式。

justify-content 语法如下：

justify-content: flex-start | flex-end | center | space-between | space-around

各个值解析:

  • flex-start：

    弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

  • flex-end：

    弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

  • center：

    弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

  • space-between：

    弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

  • space-around：

    弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

效果图：

在这里插入图片描述

10.3.3 align-items 属性

align-items 属性定义项目在交叉轴上如何对齐。

语法：

.box {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

各个值解析:

  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

效果图：

在这里插入图片描述

10.3.4 align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法：

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各个值解析:

  • stretch - 默认。各行将会伸展以占用剩余的空间。
  • flex-start - 各行向弹性盒容器的起始位置堆叠。
  • flex-end - 各行向弹性盒容器的结束位置堆叠。
  • center -各行向弹性盒容器的中间位置堆叠。
  • space-between -各行在弹性盒容器中平均分布。
  • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

在这里插入图片描述

10.3.5 flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各个值解析:

  • nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
  • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
  • wrap-reverse -反转 wrap 排列。

10.4 弹性元素的属性

10.4.1 完美的居中

以下实例将完美解决我们平时碰到的居中问题。

使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

实例

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 75px;
  height: 75px;
  margin: auto;
}

在这里插入图片描述

10.4.2 align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法

align-self: auto | flex-start | flex-end | center | baseline | stretch

各个值解析:

  • auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
.flex-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    align-self: flex-start;
}
.item2 {
    align-self: flex-end;
}

.item3 {
    align-self: center;
}

.item4 {
    align-self: baseline;
}

.item5 {
    align-self: stretch;
}

在这里插入图片描述

10.4.3 flex

flex 属性用于指定弹性子元素如何分配空间。

语法

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

各个值解析:

  • none：none关键字的计算值为: 0 0 auto
  • [ flex-grow ]：定义弹性盒子元素的扩展比率。
  • [ flex-shrink ]：定义弹性盒子元素的收缩比率。
  • [ flex-basis ]：定义弹性盒子元素的默认基准值。
.flex-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    flex: 2;
}

.item2 {
    flex: 1;
}

.item3 {
    flex: 1;
}

在这里插入图片描述

搬砖搬到互联网
关注
css3有哪些新增属性,CSS3新增属性
weixin_36480423的博客
08-03 6021
本篇文章为大家介绍一些CSS3新增的属性，CSS3新属性的出现弥补了CSS2版本的不足，解决了很多我们设置元素样式时的痛点。1.文本阴影属性text-shadow:水平距离 垂直距离 模糊半径(模糊程度) 阴影颜色说明：阴影水平距离设置为正数时向右移动，负数时向左移动、阴影垂直距离设置为正数时向下移动，负数时向上移动注意：模糊半径不能写负数，可以写多个文本阴影需要用逗号分隔 2.盒子阴影box-s...
CSS3新增选择器
qq_53280201的博客
02-14 765
CSS3给我们新增的选择器，可以更加便捷，更加自由的选择目标元素 1. 关系选择器 ~ //兄弟选择器：选择该元素后面的同级的兄弟元素 例如： h1~p:选择h1元素后面的所有同级p元素。 p~p:选择p元素后面的所有同级p元素，除了第一个p元素 2. 属性选择器 选择器 简介 E[att] 选择具有att属性的E元素 E[att="val''] 选择具有att属性且属性值等于val的E元素 E[att^="val"] 匹配具有att属性且值以val开头
CSS3新增样式（一）
pro1822的博客
03-29 534
CSS3新增样式（一）
CSS3新增属性
2302_76678927的博客
06-05 1383
1.1 resize调整盒子大小：resize属性可以控制是否允许用户调节元素大小none ： 不允许调整元素大小both ： 用户可以调节元素的宽高horizontal ： 用户可以调节元素宽度vertical ：用户可以调节元素高度1.2 box-shadow盒子阴影使用box-shadow属性为盒子添加阴影语法：值h-shadow ： 水平阴影的位置，必须填写，可以为负值v-shadow ：垂直阴影的位置，必须填写，可以为负值。
CSS3新增特性
m0_47743942的博客
03-25 1325
对css3新增特性进行简介，主要包括：新增长度单位、新增颜色设置方式、新增选择器、新增盒子属性、新增背景属性、新增边框属性、新增文本属性、新增渐变（本质背景图片）、新增字体、2D变换、3D变换、过渡、动画、过渡和动画对比、多列布局、伸缩盒模型、响应式布局、BFC、前端学习，并在最后补充了绝对定位元素的位置
css3新增伪类有哪些
yuzhochaojiwudib的博客
04-18 327
4. :nth-last-of-type(n) - 选择父元素下具有指定类型的倒数第n个子元素。3. :nth-of-type(n) - 选择父元素下具有指定类型的第n个子元素。2. :nth-last-child(n) - 选择父元素下的倒数第n个子元素。7. :first-of-type - 选择父元素下具有指定类型的第一个子元素。8. :last-of-type - 选择父元素下具有指定类型的最后一个子元素。10. :only-of-type - 选择父元素下具有指定类型的唯一子元素。
css3新增了哪些东西
yuyuyuyuyuyyuuyu的博客
03-10 277
css3新增
CSS3新增的属性
qq_44845659的博客
03-01 6309
CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 CSS3新增了很多的属性，下面一起来分析一下新增的一些属性： 1.CSS3边框： border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid; box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。
CSS3 新增选择器
JJ_Smilewang的博客
03-31 1544
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。主要包括结构伪类选择器和伪元素选择器。 1. 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 。 1.1 E:first-child E:first-child 这个选择器用于匹配父元素中的第一个子元素E /* 1.表示选择ul里面的第一个孩子 ，若第一个孩子是li元素，那么背景色就会变成粉色， 但是如果ul的第一个孩子不是li元素，那么就不会执行该样式*/ ul li:f
css3新增的伪类有哪些
ggq53219的博客
06-12 547
CSS3 引入了许多新的伪类选择器，这些选择器为开发者提供了更多的样式控制选项。）可能并不是所有浏览器都支持，或者可能需要特定的API（如全屏API）才能触发。并不是真正的 CSS3 伪类，但它们在这里被提及是为了完整性。请注意，某些伪类（如。
css3中新增的样式使用示例附效果图
09-25
以下是一些CSS3中新增样式的使用示例及详解： 1. **CSS3前缀**： 在CSS3的早期阶段，各大浏览器厂商为了支持新特性，各自引入了私有前缀，例如`-webkit-`（用于Chrome和Safari）、`-moz-`（Firefox）、`-ms-`...
CSS3新增样式2D+3D效果-立方体旋转
weixin_43981560的博客
05-30 350
CSS3新增样式2D+3D变形 下面是通过旋转和平移实现的3D立方体旋转 CSS3新增2D变形属性 2D变形：transform主要包括以下几种：none、旋转rotate、扭曲skew、缩放scale、移动translate、矩阵变形matrix 旋转和平移属性 transform：rotate(30deg);//旋转角度 transform:translate(100px,200px);//顺着X、Y轴平移的像素 transform:translateX(100px);//顺着X轴平移的像素
【前端知识之CSS】CSS3新增特性
weixin_44337386的博客
05-12 1934
本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS3新增特性。
css边框修饰
weixin_74261199的博客
10-30 603
② 分别设置边框四个方向的宽度。② 分别设置四个方向的边框颜色。② 分别设置四个方向的圆角边框。属性设置四个方向的边框颜色。属性整体设置四个圆角。整体设置上下左右边框。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2079
【代码】炫酷的登录框!(附源码)
巨好看的登录注册界面源码
bjzhang75的博客
10-31 2729
巨好看的登录注册界面源码
导航栏小案例
m0_74725366的博客
11-03 69
实现类似于这样的效果。
2024 CSS - 基础保姆级教程系列一
最新发布
qq_37779333的博客
11-03 416
一、是什么​响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整​描述响应式界面最著名的一句话就是“Content is like water”​大白话便是“如果将屏幕看作容器，那么内容就像水一样”​响应式网站常见特点：​同时适配PC + 平板 + 手机等​标签导航在接近手持终端设备时改变为经典的抽屉式导航​网站的布局会根据视口来调整模块的大小和位置。
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 229
关于react hooks的一些知识与应用
CSS3新增属性与选择器特性详解
【描述】中所提及的"html css css新增属性和选择器"，在文档中将围绕上述内容展开详细的解释和示例。不仅解释每个新增的选择器和属性是什么，还会包括它们的具体用途、用法以及如何在实际开发中应用它们来优化Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值