css3的新特性(下面的内容在css基础中更全)

属性选择器

根据元素特定属性的选择元素
A元素[属性名]–选择具有属性名属性的A元素
A元素[属性名=”属性值”]–选择具有该属性名且值为该属性值的A元素
A元素[属性名^=”val”]–选择具有该属性名且值以val开头的A元素
A元素[属性名$=”val”]–选择具有该属性名且值以val结尾的A元素
A元素[属性名*=”val”]–选择具有该属性名且值含有val的A元素

结构伪类选择器

选择父级选择器里面的子元素
A:first-child–选择父元素中的第一个子元素
A:last-child–选择父元素中的最后一个子元素A
A:nth-child(n)–选择父元素中的第n个子元素AA
A:first-of-type 指定类型A的第一个
A:last-of-type 指定类型A的最后一个
A:nth-of-type 指定类型A的第n个

伪元素选择器

  • 利用css创建新标签元素，不需要html标签，从而简化html结构
  • element::before 在元素内部的前面插入内容
  • elemnet::after 在元素内部的后面插入内容
  • 注意：创建的元素属于行内元素
  • 必须要有content属性
    如div::before{content:”早上好，又是美好的一天呢”}
  • 使用场景：
    伪元素字体图标（配合字体图标网站）
    鼠标放上去有黑色半透明盒子
    伪元素清除浮动（额外标签法的升级优化）见浮动

css3盒子模型

在选择器的最后一行添加box-ing:值
通过box-sizing指定盒模型，有两个值：content-box,border-box
box-sizing:content-box 盒子大小为width+padding+border（以前默认的）
box-sizing:border-box 盒子大小为width。此时oadding和border不会撑大盒子，而是会挤压里面的内容（前提是padding+border不超过width）

flex布局和grid布局（看对应文章）

css3

边框，圆角，边框图片

边框border

border:npx 边框类型 边框颜色;
可以接受多个值

  • 第一个值是宽度npx，
  • 第二个值是类型solid(直线)，dashed（虚线），double（双实现），ridge（突起的边框）
  • 第三个值是颜色，可以英文单词可以其他表示方式

圆角border-radius

border-radius: npx 给元素添加圆角,px值越大元素越接近圆
值如果为百分比，则为盒子的宽度与高度的比值

1
2
3
4
5
/*设置一个值，那么作用于四个角*/
border-radius: 15px; 
/*如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角。*/
border-radius: 50px 20px;
/*四个值：左上角，右上角， 右下角，左下角*/

椭圆角 50%

1
2
3
4
border-radius: 50px / 15px;
border-radius: 15px / 50px;
/* 椭圆形50% */
border-radius: 50%;

百分比别人的笔记

边框图片 border-image

使用图片(border.png)作为边框

语法：

1
2
3
4
5
6
7
8
9
div {
  border: 10px solid transparent; /* 设置一个基础边框 */
  padding: 15px;
  border-image-source: url(border.png); /* 图片路径 */
  border-image-slice: 30 fill; /* 裁剪 */
  border-image-width: 10px; /* 边框宽度 */
  border-image-outset: 0; /* 默认值，边框向外扩展 */
  border-image-repeat: stretch; /* 平铺方式 */
}

简写形式（常用）:

1
2
3
4
5
div {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 fill / 10px stretch;
}

理解属性：

  • border-image-slice
    这是最重要的属性之一，因为它决定了如何切割图像。假设你的图像是一个正方形，并且你想让它作为边框使用，那么你需要指定从每一边裁剪掉多少像素。如果图像尺寸为100x100像素，并设置 border-image-slice: 30;，则图像会被分成9部分：顶部、底部、左侧、右侧各30像素宽/高，中心区域为40x40像素。
  • border-image-repeat
    决定了边框图像在边缘上的表现方式。stretch 会拉伸图像以填充空间；repeat 会简单地重复图像，可能导致不连续的效果；而 round 则会自动调整图像大小，图片会尽可能地重复以填满边框区域完整且均匀分布。

感觉还是好难理解呢，下面是代码和对应图片例子：
边框图片
边框图片

定义中间部分是重复还是拉伸 border-image: url(border.png) 30 stretch拉伸中间图片作为边框|round重复填充中间图片作为边框;

该属性分为三个部分：
要用作边框的图像(“border.png”);
在何处对图像进行切片;
比较好的官方文档

背景

背景图片background-image

不同的背景图像和图像用逗号隔开

1
2
3
4
5
#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

可以给不同的图片设置多个不同的属性

1
2
3
#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

其他
background-image：设置背景图片。
background-repeat：控制背景图片的重复方式。
background-size：控制背景图片的大小。
background-position：控制背景图片的位置。
background-attachment：控制背景图片是否随页面滚动

背景填充方式 background-repeat(css2)

控制背景图片的重复方式
repeat：默认值，背景图片在水平和垂直方向上重复。
no-repeat：背景图片不重复。
repeat-x：背景图片在水平方向上重复。
repeat-y：背景图片在垂直方向上重复。

是否随页面滚动background-attachment（css2）

scroll：默认值，背景图片随页面滚动
fixed：背景图片固定在视口中，不随页面滚动

背景大小 background-size

小可以用长度、百分比指定，也可以使用两者之一 关键词：auto：默认值，图片保持原始大小。
cover：图片会缩放以覆盖整个元素，可能会裁剪图片。
contain：图片会缩放以适应元素，不会裁剪图片。
length或percentage：指定图片的具体宽度和高度
background-size 属性

背景图像的区域 background-origin

background-origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
background-origin 属性
background-origin 属性

多背景图片

可以为一个元素设置多个背景图像，每个图像可以通过逗号分隔指定。

1
2
3
4
5
body {
  background-image: url(img1.png), url(img2.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

例题

要求：用图像填充整个页面（无空白）；根据需要缩放图像；页面上的居中图像；不会导致滚动条

1
2
3
4
html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

渐变

线性渐变 (linear-gradient) 和 径向渐变 (radial-gradient)；
盒阴影 (box-shadow) 和 文本阴影 (text-shadow)

颜色

RGBA颜色

A：alpha 参数是一个介于 0.0 之间的数字 （完全透明）和 1.0（完全不透明）

HSLA 颜色

HSL 代表色相、饱和度和亮度

  • 色相是色轮上的度数（从 0 到 360）：
    • 0（或 360）为红色
    • 120 为绿色
    • 240 是蓝色
  • 饱和度是一个百分比值：100% 是全色。
  • 亮度也是一个百分比;0% 为深色（黑色），100% 为白色。
    A：alpha 参数是一个介于 0.0 之间的数字 （完全透明）和 1.0（完全不透明）

不透明度opacity

opacity属性值必须是介于 0.0 （完全透明） 和 1.0 （完全不透明） 之间的数字

渐变-线性渐变

1
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
  • 第一个值是减白拿的方向
    • 如果您想对渐变的方向进行更多控制， 您可以定义一个角度，而不是预定义的方向（到 Bottom、到 top、to right、to left、to lower right 等）。值 0deg 相当于 “到顶部”。值 90deg 等效于 “to right”。值 180 度相当于 “to bottom”。
    • 默认从上到下（此时direction可以不写）
    • 从左到右to right
    • 对角线，左上到右下to bottom right
    • 使用角度 180°（从上到下）180deg
  • 后面的值是色标，≥2个颜色进行渐变
    渐变角度图

使用透明度（transparent）

用于创建减弱变淡的效果，做法把颜色编程带有透明度的颜色即可，如

1
2
3
#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重复的线性渐变函数

repeating-linear-gradient() 函数用于重复线性渐变：

1
2
3
4
#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

渐变-径向渐变

径向渐变由其中心定义，默认情况下，形状为椭圆，大小为最远角，位置为中心

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

渐变-径向渐变

渐变-圆锥渐变

（看文档吧）

阴影

文本阴影text-shadow

1
text-shadow: h-offset v-offset blur-radius color;
  • h-offset：水平偏移量，正值向右偏移，负值向左偏移。
  • v-offset：垂直偏移量，正值向下偏移，负值向上偏移。
  • blur-radius：模糊半径，值越大，阴影越模糊。可以省略，省略时默认为 0。
  • color：阴影的颜色，可以是任何有效的 CSS 颜色值（如 #ff0000、red、rgba(255, 0, 0, 0.5) 等）。可以省略，省略时默认为黑色

常见效果

  • 简单阴影：text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  • 内阴影：text-shadow: -2px -2px 4px rgba(0, 0, 0, 0.5);
  • 彩色阴影：text-shadow: 2px 2px 4px blue
  • 文字边框
    可以使用 text-shadow 属性在周围创建普通边框 一些文本（无阴影）：
    1
    2
    3
    4
    h1 {
      color: coral;
      text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }
  • 多重阴影
    1
    2
    3
    4
    5
    .text {
        text-shadow:
            2px 2px 4px rgba(0, 0, 0, 0.5),
            -2px -2px 4px rgba(255, 255, 255, 0.5);
    }

文本溢出text-overflow属性

1
2
3
selector {
  text-overflow: clip | ellipsis;
}

clip：默认值，直接裁剪文本，不添加任何指示符。
ellipsis：显示省略号（…）来表示被裁剪掉的文本。

为了使 text-overflow 生效，通常需要设置以下属性：

  • white-space: 控制如何处理元素内的空白字符。
  • 常用的值有：nowrap: 强制在同一行内显示所有文本，不允许换行。
  • overflow: 必须设置为 hidden 或其他非 visible 的值，以便隐藏超出容器部分的内容。
    1
    2
    3
    <div class="container">
      这是一个非常长的文本示例，它将超出其父容器的边界...
    </div>
    1
    2
    3
    4
    5
    6
    .container {
      width: 200px; /* 设置一个固定的宽度 */
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 使用省略号表示被裁剪的文本 */
    }

盒阴影 box-shadow

CSS3文本溢出属性指定应向用户如何显示溢出内容
如果多个阴影，通过逗号分隔多个阴影值

1
box-shadow: h-offset v-offset blur-radius spread-radius color;
  • h-offset：水平偏移量，正值向右偏移，负值向左偏移。
  • v-offset：垂直偏移量，正值向下偏移，负值向上偏移。
  • blur-radius：模糊半径，值越大，阴影越模糊。可以省略，省略时默认为 0。
  • spread-radius：扩展半径，正值会扩大阴影的大小，负值会缩小阴影的大小。可以省略，省略时默认为 0。
  • color：阴影的颜色，可以是任何有效的 CSS 颜色值（如 #ff0000、red、rgba(255, 0, 0, 0.5) 等）。可以省略，省略时默认为黑色。

常见效果：

简单阴影：box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
内阴影：box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);
多重阴影：box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
彩色阴影：box-shadow: 2px 2px 4px blue;
扩展阴影：box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.5);

注意

文本阴影和盒阴影的内阴影和多重阴影不要搞混

  • 内阴影（不一样）
    • 文本：text-shadow: -2px -2px 4px rgba(0, 0, 0, 0.5);
    • 盒子：内阴影：box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);
  • 多重阴影（一样的）
    • 文本：text-shadow:
      2px 2px 4px rgba(0, 0, 0, 0.5),
      -2px -2px 4px rgba(255, 255, 255, 0.5);
    • 盒子：多重阴影：box-shadow:
      2px 2px 4px rgba(0, 0, 0, 0.5),
      -2px -2px 4px rgba(255, 255, 255, 0.5);

2D与3D变换

2D 变形

1
2
3
.box {
  transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}
1
2
3
4
5
6
7

.container {
  perspective: 1000px; /* 3D 透视 */
}
.box {
  transform: rotateX(45deg) rotateY(30deg);
}

过渡与动画

过渡transition（常搭配:hover）

1
transition: property duration timing-function delay;

  • property：指定需要过渡的CSS属性，如background-color、width、height等。可以使用all表示所有属性。

  • duration：过渡的持续时间，单位为秒（s）或毫秒（ms）。

  • timing-function：过渡的动画曲线，常见的值有ease(默认)、linear、ease-in、ease-out、ease-in-out,或者使用 cubic-bezier() 自定义曲线

  • delay：过渡的延迟时间，单位为秒（s）或毫秒（ms）（可选，默认为 0s）

  • 过渡是一个状态，定义元素从一种样式变换到另一种样式的过渡效果

  • transition:要过渡的属性 花费时间 运动曲线 何时开始;

  • 属性：如宽度高度背景颜色，如果想要所有的属性都变化过渡，写一个all
    花费时间：必须写单位，如1.5s
    运动曲线 默认ease，可以省略
    何时开始：必须写单位，默认0s,可以省略

  • 如果多个属性逗号分隔，如
    div{
    width:200px;
    height:100px;
    background-color:red;
    transition:width 0.6s,height 0.6s;
    或transition:all 0.6s;
    }

动画 (@keyframes + animation)：创建复杂的动画序列

动画比过渡更强大，允许你定义复杂的多步骤动画序列，而不仅仅是在两个状态之间进行过渡。动画通过关键帧（@keyframes）来定义动画的不同阶段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
然后，在需要应用动画的元素上引用这些关键帧：
div {
  animation-name: slidein;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite; /* 可选，默认为1次 */
  animation-direction: alternate; /* 可选，默认为normal */
}
  • animation-name：定义的@keyframes动画名称。
  • duration：动画的持续时间。
  • timing-function：动画的动画曲线。
  • delay：动画的延迟时间。
  • iteration-count：动画的播放次数，infinite表示无限
    循环。
  • direction：动画的播放方向，normal（默认值）、reverse、alternate、alternate-reverse。
  • fill-mode：动画结束后的状态，none（默认值）、forwards、backwards、both。

媒体查询

媒体查询允许你根据设备的特性（如屏幕宽度、高度、方向等）应用不同的CSS样式。这使得你可以为不同的设备（如桌面、平板、手机）提供优化的用户体验

1
2
3
@media media-type and (media-feature) {
    /* CSS规则 */
}
  • media-type：指定媒体类型
    • 如screen（屏幕）、print（打印）、all（所有设备）等。
  • media-feature：指定媒体特性
    • width：设备屏幕的宽度。
    • height：设备屏幕的高度。
    • orientation：设备的方向，portrait（竖屏）或landscape（横屏）。
    • aspect-ratio：设备屏幕的宽高比。
    • resolution：设备的分辨率。

常用媒体特性

@media (max-width: 768px){}当屏幕宽度小于或等于 768px 时，应用大括号内的样式

  • min-width 和 max-width：
    min-width: 768px：当屏幕宽度 ≥ 768px 时生效。
    max-width: 768px：当屏幕宽度 ≤ 768px 时生效。
  • orientation：
    orientation: portrait：竖屏（高度 > 宽度）。
    orientation: landscape：横屏（宽度 > 高度）。
  • resolution：
    min-resolution: 2dppx：针对高分辨率屏幕（如 Retina 屏）

其他

字体图标

<i class="fas fa-star"></i>

滤镜filter

filter:函数(npx)
如filter:blur(5px) 模糊处理函数blur()，n越大模糊程度越大（变虚变近视）

calc函数

calc()函数在声明css属性时执行一些计算
如width:calc(100%-80px);

学习文档

css进阶学习文档
css3菜鸟教程