CSS3新增特性详解

最新推荐文章于 2024-04-06 14:48:03 发布
置顶 最新推荐文章于 2024-04-06 14:48:03 发布
阅读量459 收藏 1
点赞数
分类专栏： css 文章标签： CSS3 选择器 动画 2D/3D转换 盒子阴影
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jyn15159/article/details/113172870
版权

CSS3

CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。

CSS3 被划分为模块。其中最重要的 CSS3 模块包括：

  • 选择器
  • 框模型
  • 背景和边框
  • 文本效果
  • 2D/3D 转换
  • 动画
  • 多列布局
  • 用户界面

1. 背景透明rgba()

background: rgba(0, 0, 0, 0.3);
  • 最后一个参数是alpha透明度，取值范围 0~1之间。
  • 习惯上把0.3的0省略掉，background: rgba(0, 0, 0, .3);后面必须是 4个值。
  • 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
  • 因为是CSS3 ，所以低于 ie9 的版本是不支持的。

2. 圆角边框border-radius

  • 让一个正方形变成圆圈
div{
    width:100px;
    height:100px;
    border-radius: 50%; 
}
  • 其中每一个值可以为数值或百分比的形式。

圆角矩形设置4个角。

圆角矩形可以为4个角分别设置圆度， 但是是有顺序的。

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
  • 如果4个角，数值相同
border-radius: 15px;
  • 里面数值不同，也可以按照简写的形式，具体格式如下:
border-radius: 左上角 右上角  右下角  左下角;     遵循顺时针

3. 盒子阴影box-shadow

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；
属性值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅CSS颜色值。
inset可选。将外部阴影（outset）改为内部阴影。
  • 前两个属性是必须写的。其余的可以省略。
  • 外阴影 (outset) 是默认的，但是不能写，想要内阴影可以写inset 。
div {
    width: 200px;
    height: 200px;
    border: 10px solid red;
    /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
    /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
    box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
}

4. CSS3 属性选择器

  • 属性选择器列表
选择符简介
E[att]选择具有att属性的E元素
E[att=“val”]选择具有att属性、且属性值等于val的E元素
E[att^=“val”]选择具有att属性、且属性值以val开头的E元素
E[att$=“val”]选择具有att属性、且属性值以val结尾的E元素
E[att*=“val”]选择具有att属性、且属性值中含有val的E元素
button {
  cursor: pointer;
}

button[disabled] {
  cursor: default
}

input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

5. 结构伪类选择器

选择符简介
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中的最后一个子元素E
E:nth-child(n)匹配父元素中的第n个子元素E
E:first-of-type匹配指定类型E的第一个元素
E:last-of-type匹配指定类型E的最后一个元素
E:nth-of-type(n)匹配指定类型E的第n个元素
ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

6. nth-child(n)

  • 注意：本质上就是选中第几个子元素
  • n 可以是数字、关键字、公式
  • n 如果是数字，就是选中第几个
  • 常见的关键字有 even 偶数、odd 奇数
  • 常见的公式如下(如果 n 是公式，则从 0 开始计算)
  • 但是第 0 个元素或者超出了元素的个数会被忽略
公式取值
2n偶数
2n+1奇数
5n5 10 15 …
n+5从第5个开始（包含第5个）到最后
-n+5前5个（包含第5个）…
<style>
  /* 偶数 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇数 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式，从 0 开始计算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶数 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 选择第 0 5 10 15, 应该怎么选 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是从第5个开始往后选择 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五个 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

7. nth-child(n) 和 nth-of-type(n)的区别

<style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>
  • nth-child 选择父元素里面的第几个子元素，不管是第几个类型
  • nth-of-type 选择指定类型的元素

8. 伪元素选择器

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

伪类选择器注意事项：

  • before 和 after 必须要有 content 属性
  • before在内容前面，after 在内容后面
  • before 和 after 创建的是一个元素，但是属于行内元素
  • 创建出来的元素在 Dom 中查找不到，所以称为伪元素
  • 伪元素和标签选择器一样，权重为 1
<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

9. 伪元素添加字体图标

p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

10. 2D转换-移动translate

2D转换

2D 转换是改变标签在二维平面上的位置和形状

  • 移动： translate
  • 旋转： rotate
  • 缩放： scale

translate 语法

  • x 就是 x 轴上水平移动
  • y 就是 y 轴上水平移动
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

注意：

  • 2D的移动主要是指 水平、垂直方向上的移动
  • translate 最大的优点就是不影响其他元素的位置
  • translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
  • 行内标签没有效果,只针对块级元素
div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */
  
  /* 水平移动 100px */
  /* transform: translate(100px, 0) */
  /* transform: translateX(100px); */
    
  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */
  transform: translateY(100px)
}

10.1. 让一个div盒子水平垂直居中

<style>
    div {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
        /* 1. tranlate里面的参数是可以用 % */
        /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
        /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
        /* transform: translateX(50%); */
    }
    p {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        background-color: purple;
        /* margin-top: -100px;
        margin-left: -100px; 
        盒子往上、向左移动自己高度、宽度的一半 */
        transform: translate(-50%, -50%);
    }
    span {
        /* translate 对于行内元素是无效的 */
        transform: translate(300px, 300px);
    }
</style>

11. 2D转换-旋转rotate

rotate 旋转

  • 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

  1. rotate语法

    /* 单位是：deg */
transform: rotate(度数)

注意:

  • rotate 里面跟度数，单位是 deg
  • 角度为正时，顺时针，角度为负时，逆时针
  • 默认旋转的中心点是元素的中心点

使用步骤：

  1. 给元素添加转换属性 transform
  2. 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度
img:hover {
  transform: rotate(360deg)
}

11.1 下拉三角案例

<style>
div {
    position: relative;
    width: 249px;
    height: 35px;
    border: 1px solid #000;
}
div::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 15px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
    transition: all 0.2s;
}
/* 鼠标经过div  里面的三角旋转 */
div:hover::after {
    transform: rotate(225deg);
}
</style>

11.2. 设置元素旋转中心点(transform-origin)

  1. transform-origin 基础语法
transform-origin: x y;

注意:

  • 注意后面的参数 x 和 y 用空格隔开
  • x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
  • 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

12. 2D转换-缩放scale

  1. scale 的作用

    • 用来控制元素的放大与缩小

  2. 语法

    transform: scale(x, y)

注意:

  • 注意，x 与 y 之间使用逗号进行分隔
  • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
  • transform: scale(2, 2): 宽和高都放大了二倍
  • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
  • transform:scale(0.5, 0.5): 缩小
  • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
div:hover {
    /* 注意，数字是倍数的含义，所以不需要加单位 */
    /* transform: scale(2, 2) */
    /* 实现等比缩放，同时修改宽与高 */
    /* transform: scale(2) */
    /* 小于 1 就等于缩放*/
    transform: scale(0.5, 0.5)
}

12.1. 图片放大案例

<style>
div {
    overflow: hidden;
    float: left;
    margin: 10px;
}

div img {
    transition: all .4s;
}

div img:hover {
    transform: scale(1.1);
}
</style>

12.2. 分页按钮案例

<style>
li {
    float: left;
    width: 30px;
    height: 30px;
    border: 1px solid pink;
    margin: 10px;
    text-align: center;
    line-height: 30px;
    list-style: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all .4s;
}

li:hover {
    transform: scale(1.2);
}
</style>

13. 2D 转换综合写法以及顺序问题

  1. 知识要点

    • 同时使用多个转换，其格式为 transform: translate() rotate() scale()
    • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
    • 同时有位移或者其他属性的时候，要将位移放到最前面

  2. 代码演示

    div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

14. 动画(animation)

动画:

  • 动画是 CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

14.1. 动画的基本使用

  • 先定义动画
  • 再调用定义好的动画
  1. 定义动画:
@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}
  1. 使用动画：
div {
    /* 调用动画 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间；
}

14.2. 动画序列

  • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列。
  • 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果。
  • 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数。
  • 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%。
<style>
div {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    animation-name: move;
    animation-duration: 0.5s;
}

@keyframes move{
    0% {
        transform: translate(0px)
    }
    100% {
        transform: translate(500px, 0)
    }
}
</style>

时间节点，可以更为精准的控制动画的多个状态节点，动画的变化更为丰富；

动画序列就是时间节点时的状态；

n步变化，就需要n+1个节点；

动画从开始执行到经过动画节点，都是基于上一个状态进行变化

<style>
/* from to 等价于  0% 和  100% */
@keyframes move {
	from {
		transform: translate(0, 0);
		}
	to {
		transform: translate(1000px, 0);
	}
} 
/* 动画序列 */
/* 1. 可以做多个状态的变化 keyframe 关键帧 */
/* 2. 里面的百分比要是整数 */
/* 3. 里面的百分比就是总的时间（案例10s）的划分 25% * 10  =  2.5s */

@keyframes move {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(1000px, 0)
	}
	50% {
		transform: translate(1000px, 500px);
	}
	75% {
		transform: translate(0, 500px);
	}
	100% {
		transform: translate(0, 0);
	}
}

div {
	width: 100px;
	height: 100px;
	background-color: pink;
	animation-name: move;
	animation-duration: 10s;
}
</style>

14.3. 动画属性

  • 丰富我们的动画特性，能做更多的属性控制；
属性描述
@keyframes规定动画
animation所有动画的简写属性，除了animation-play-state属性
animation-name规定@keyframes动画的名称
animation-duration规定动画完成一个周期所花费的时间(秒或毫秒)，默认是0
animation-timing-function规定动画的速度曲线，默认是"ease"
animation-delay规定动画何时开始，默认是0
animation-iteration-count规定动画被播放的次数，默认是1，还有infinite
animation-direction规定动画是否在下一周期逆向播放，默认是"normal",alternate逆向播放
animation-play-state规定动画是否正在运行或暂停。默认是"running",还有"pause"。
animation-fill-mode规定动画结束后状态，保持forwards 回到起始backwards
  • animation-timing-function：动画 运动 速度曲线：速度快慢的体现；
div{
    /* 匀速  */
    animation-timing-function: linear;
    /* 慢-快-慢  默认值  */
    animation-timing-function: ease;
    /* 慢-快  */
    animation-timing-function: ease-in;
    /* 快-慢  */
    animation-timing-function: ease-out;
    /* 慢-快-慢  */
    animation-timing-function: ease-in-out;
}
  • steps（）,不连续的，一小步一小步在跳，使用场景： UI给我们是分帧图，格子图；
  • animation-timing-function：steps(n) 分步 实现 老电影一帧一帧，整个动画分为几步骤完成
/* 分步 实现 老电影一帧一帧，整个动画分为几步骤完成*/
animation-timing-function: steps(n);
  • animation-delay：动画推迟多久执行；动画得等待。
  • animation-iteration-count：播放循坏次数 1 2 infinite 无限次 iteration：循环；
div{
    /* 指定次数设置  */
    animation-iteration-count: 2;
    /* 无限次数设置  */
    animation-iteration-count: infinite;
}
  • animation-direction：循环方向：若0% 红色; 100% 黑色
div{
    /*1 默认值 0-100 */
    animation-direction: normal;
    /*2 100-0 */
    animation-direction: reverse;
    /*3 0-100-0 最少要执行两次动画*/
    animation-direction: alternate;
    /*4 100-0-100 */
    animation-direction: alternate-reverse;
}
  • animation-fill-mode：动画等待或者结束的状态设置；
div{
    /*1 动画结束后，元素样式停留在 100% 的样式 */
    animation-fill-mode: forwards;
    
    /*2 在延迟等待的时间内，元素样式停留在 0% 的样式 
    动画结束的时候，回到div本身的样式（回到起始状态）*/
    animation-fill-mode: backwards;
    
    /*3 同时设置了 forwards和backwards两个属性值
    在动画等待时间，样式为元素样式停留在 0% 的样式，
    动画结束时，元素样式停留在 100% 的样式*/
    animation-fill-mode: both;
}
  • animation-play-state：暂停和播放, 鼠标控制, 不常用,经常和鼠标经过等其他配合使用
div{
    /*1 播放 */
    animation-play-state: running;
    /*2 暂停*/
    animation-play-state: paused;
}
  • 设置 animation-direction ，需设置动画多次执行；
    • 要想动画走回来，而不是直接调回来：animation-direction: alternate
  • 设置 animation-fill-mode，不能设置 无限 执行；
    • 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

14.4. 动画简写

  • 简单把动画属性写在一起，代码简单；vscode有提示；
  • 简写：动画名称 持续时间 速度曲线 等待时间 执行次数 执行的方向 动画等待或结束的状态
div{
    animation: name duration timing-function delay iteration-count direction fill-mode;
    animation: 动画名称 持续时间 运动曲线      何时开始  播放次数      是否反方向  起始与结束状态 
}
  • 组动画：需要用 逗号 隔开；
animation: name_1 5s linear,name_2 2s linear;
  • animation-play-state 没有在简写内
  • 记忆：知道意思即可，记不住去查就行；
div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  animation-name: move;      /* 动画名称 */
  animation-duration: 2s;    /* 动画花费时长 */
  animation-timing-function: ease-in-out;    /* 动画速度曲线 */
  animation-delay: 2s;       /* 动画等待多长时间执行 */
  animation-iteration-count: infinite;      /* 规定动画播放次数 infinite: 无限循环 */
  animation-direction: alternate;    /* 是否逆行播放 */
  animation-fill-mode: forwards;     /* 动画结束之后的状态 */
}

div:hover {
  /* 规定动画是否暂停或者播放 */
  animation-play-state: paused;
}
木蓝茶陌*_*
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3应用详解
09-28
CSS3的另一个亮点是新增的过渡（Transitions）、动画（Animations）和3D转换，这些特性为网页增添了动态效果和深度感，极大地提高了用户体验。 在样式表现上，CSS3提供了更多的颜色模式、边框和背景处理方式，如...
css3中新增的样式使用示例附效果图
09-25
以下是一些CSS3中新增样式的使用示例及详解： 1. **CSS3前缀**： 在CSS3的早期阶段，各大浏览器厂商为了支持新特性，各自引入了私有前缀，例如`-webkit-`（用于Chrome和Safari）、`-moz-`（Firefox）、`-ms-`...
CSS3有哪些新特性
study_way的博客
09-24 249
CSS3 引入了许多新特性，以增强样式设计和页面布局的能力，提供更多的视觉效果和交互性。
对于nth-of-type(n)的理解
corn78的博客
11-24 9766
定义和用法： :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。 一、nth-of-type(n) (当n为数字时） 先看下代码，在代码中具体讲解。 这里我们在一个类名为father的盒子中写了五个p标签，样式表中用到了我们的nth-of-type伪类，这个样式也不难看懂。我们把这个选择器拆分开来理解，首先.father...
探索CSS3.0的30个新特性：让网页设计更富创意
最新发布
weixin_43298747的博客
04-06 713
使用@font-face规则可以引入自定义字体文件，丰富网页字体选择。通过伪元素可以自定义滚动条的样式。
CSS3的新特性
weixin_45086164的博客
03-23 1276
CSS3的新特性
css学习
ccirclee的博客
10-27 197
CSS 快捷键 control +？ 是 html css JavaScript 结构 样式 行为 相分离 如何引入css 1.行间样式 例子： <div style=" width: 100px; height: 100px; background-color: brown;"> </div> 2.页面级css <head> <styl
详解CSS3中属性选择器新增加的特性
01-21
零、概览CSS2支持的属性选择器...CSS3新增*=、^=、$=三种匹配方式[{属性 | 属性 {*= | ^= | $=} 值}]：1.*=表示模糊匹配，[href=163]可以匹配href=163.com、href=mail.163.com等元素；2.^=表示以指定字符开头，[href^=
CSS实现垂直居中的4种思路详解
09-24
3. **通过新增元素实现垂直居中** 创建一个新的匿名元素（如`<i>`），设置它的高度为父元素高度，宽度为0，并设置`vertical-align: middle`。这种方法利用了行内块元素的特性，适用于多行文本或不定高的元素。 ```...
50道 CSS 基础面试题1
08-03
5. **CSS3新增伪类**：如`:first-of-type`, `:last-of-type`, `:only-of-type`, `:only-child`, `:nth-child(n)`, `:enabled`, `:disabled`和`:checked`，分别用于选取特定位置的元素或根据元素状态。 6. **元素...
前端基础——CSS3基础
qq_41721660的博客
04-11 392
1. 渐变背景 提出： 比较规则的渐变背景可以采用切片的方式，切1px渐变背景图片然后进行平铺，而不规则的渐变只能引入整张图片，可拓展新比较低，还会影响网页的加载速度。 因此CSS3提出渐变背景background-image的属性，包括线性渐变和径向渐变 线性渐变 概念：渐变的颜色过度是沿着一条直线进行渐变 语法：background-image: linear-gradient(to 方向,颜色1 位置1，颜色2 未知2 ,...) <style> .box1{
理解nth-of-type（）与nth-child（）的区别
dujun
08-16 2247
:nth-child(n)选择器，该选择器选取父元素的第n 个子元素，不论元素的类型。 :nth-of-type(n)选择器，选择器选取父元素的第 n 个指定类型的子元素。 <h1>这是标题</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个...
CSS基础（八）——CSS3新增样式
hold_on_qlc的博客
01-06 744
CSS3相较于CSS2新增了许多新特性，如：边框圆角、阴影、形变：旋转、缩放、位移、过渡效果、动画效果、媒体查询、flex 布局、grid 布局等等（选择器、字体）。 边框圆角 1、通过属性border-radius来设置。 2、最多可以设置4个值，左上 右上 右下 左下。 如果设置2个值，第一个值表示左上和右下，第二个值表示右上和左下。 如果设置1个值，那么4个角都是一样的弧度。 3、border-radius的值就是半径r，半径越大——>圆越大——>弧度就越大。
CSS3
DedoChen的博客
03-15 375
1.CSS3 CSS 用于控制网页的样式和布局。而CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。 CSS3 是最新的 CSS 标准 CSS3已经完全向后兼容，所以你就不必改变现有的设计。浏览器一般情况下都会支持CSS2。 CSS3 模块 CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要CSS3模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D...
CSS3新增的属性
ernester的博客
11-02 203
在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。skew():元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：transform:skew(30deg,20deg);scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);
以下不是css3新增的模块,css3有哪些新特性 包含哪些模块
weixin_42117224的博客
08-03 742
第 1 选择器第 2 RGBA和透明度第 3 多栏布局第 4 多背景图第 5 Word Wrap第 6 文字阴影第 7 @font-face属性第 8 圆角(边框半径)第 9 边框图片第 10 盒阴影第 11 盒子大小第 12 媒体查询第 13 语音1、CSS3圆角表格圆角表格，对应属性：border-radius。2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一...
CSS3新增了哪些新特性？
前端开发工程师博客
05-25 376
面试官：CSS3新增了哪些新特性？ 一、是什么 css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观 css3是css的最新标准，是向后兼容的，CSS1/2 的特性在 CSS3 里都是可以使用的 而 CSS3 也增加了很多新特性，为开发带来了更佳的开发体验 二、选择器 css3中新增了一些选择器，主要为如下图所示： 三、新样式 边框 css3新增了三个边框属性，分别是： border-radius：创建圆角边框 box-
CSS3新增特性部分
weixin_45077672的博客
04-13 157
CSS3新增特性： 2.1CSS3的现状 1.新增的CSS3特性有兼容性问题，ie9+才支持 2.移动端支持由于pc端 3.不断改进中 4.应用相对广泛 5.现阶段主要学习：新增选择器和盒子模型以及其他特性 CSS3新增选择器 CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 1.属性选择器 2.结构伪类选择器 3.伪元素选择器 2.2属性选择器 属性选择器可以根据元素特定的属性来选择元素，这样就可以不借助于类或者id选择器 1.选择属性来选择 例子： input
css3新增的选择器
07-27
CSS3新增了许多选择器，以下是其中一些常用的选择器： 1. 属性选择器：可以根据元素的属性值来选择元素，例如`[attribute=value]`、`[attribute^=value]`、`[attribute$=value]`等。 2. 伪类选择器：用于选择元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值