前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css3详解

css3详解

作者头像
Insecure Fluoxetine
发布2024-04-08 21:33:58
1070
发布2024-04-08 21:33:58
举报
文章被收录于专栏:CSSCSS

一.什么是CSS3

CSS3是Cascading Style Sheets的第三个版本,是一种用于描述文档样式的语言(CSS3是CSS(层叠样式表)技术的升级版本)。它是前端开发中用于控制网页布局和样式的技术之一。CSS3引入了许多新的特性和功能,如圆角、阴影、渐变、动画等,大大增强了网页设计和交互的能力。与CSS2相比,CSS3提供了更多的选择和灵活性,使开发人员可以以更精细的方式控制网页的外观和表现。

二.css3相较于css有什么改进(优点)

  1. 模块化:CSS3将样式表分成了多个模块,每个模块负责一个特定的功能或特性。这种模块化的设计使得CSS3更加灵活和可扩展。
  2. 新特性:CSS3引入了大量新的特性,包括圆角、阴影、渐变、动画、多列布局等。这些新特性使得开发者能够更方便地实现复杂的样式效果。
  3. 增强样式选择器:CSS3引入了一些新的选择器,如属性选择器、伪类选择器和伪元素选择器等。这些新的选择器使得开发者能够更精确地选择DOM元素,从而灵活地应用样式。
  4. 响应式布局:CSS3引入了媒体查询功能,可以根据设备的不同,自动适应不同的屏幕尺寸和分辨率。这使得开发者能够更轻松地创建响应式布局,提供更好的用户体验。
  5. 字体支持:CSS3引入了新的字体模块,可以支持更多的字体格式和字体效果,提高了网页的设计效果。
  6. 2D和3D转换:CSS3新增了2D和3D转换的属性,可以实现元素的旋转、缩放、倾斜等效果,增强了用户体验和页面的动态效果。

总的来说,CSS3相比于CSS具有更多的功能和更灵活的样式选择器,能够更方便地实现复杂的样式效果和响应式布局。

三.css3必学的重点

CSS3 边框 CSS3 圆角 CSS3 背景 CSS3 渐变 CSS3 文本效果 CSS3 字体 CSS3 2D 转换CSS3 3D 转换(旋转) CSS3 过渡 CSS3 动画 CSS3 多列 CSS3 用户界面 CSS3 图片 CSS3 按钮 CSS3 分页 CSS3 框大小 CSS3 弹性盒子 CSS3 多媒体查询 CSS3 多媒体查询实例 CSS 网格布局 CSS 网格容器Css 网格元素

四.新增重点特性

background属性

background-image:设置元素的背景图像。 background-origin:规定背景图片的定位区域。。 background-size:规定背景图片的尺寸。。 ·background-repeat:设置是否及如何重复背景图像。

background-clip:用于确定背景画区
word-wrap属性

word-wrap 属性允许长单词或 URL 地址换行到下一行 注:所有主流浏览器都支持 word-wrap 属性。 基础语法: word-wrap:normal break-word:

text-shadow属性

text-shadow 属性:向文本设置阴影。 text-shadow基础语法: text-shadow:5px 5px 5px #FF0000: 参数分别表示:水平阴影,垂直阴影,模糊距离,阴影颜色;

font-face属性

font-face属性:定义自己的字体

transform 属性
提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。 属性值
border新增
  • border-radius:创建圆角边框
  • box-shadow:为元素添加阴影
  • border-image:使用图片来绘制边框
linear-gradient:(线性渐变)
radial-gradient :(径向渐变)

transition-property属性

定义:设置对象中的参与过渡的属性

语法:transition-property:none | all | property

特点

没有属性改变

默认值,所有属性都改变

元素的属性名 width,color等

transition-duration属性

定义: 设置对象过渡的持续时间

语法:transition-duration:time

规定完成过渡效果需要花费的时间,以秒或者毫秒计,默认值0

transition-timing-function属性

定义:设置对象中过渡的动画类型,即规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

语法:只能使用一个属性值

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2024-03-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一.什么是CSS3
  • 二.css3相较于css有什么改进(优点)
  • 三.css3必学的重点
    • CSS3 边框 CSS3 圆角 CSS3 背景 CSS3 渐变 CSS3 文本效果 CSS3 字体 CSS3 2D 转换CSS3 3D 转换(旋转) CSS3 过渡 CSS3 动画 CSS3 多列 CSS3 用户界面 CSS3 图片 CSS3 按钮 CSS3 分页 CSS3 框大小 CSS3 弹性盒子 CSS3 多媒体查询 CSS3 多媒体查询实例 CSS 网格布局 CSS 网格容器Css 网格元素
    • 四.新增重点特性
      • background属性
        • background-clip:用于确定背景画区
          • word-wrap属性
            • text-shadow属性
              • transform 属性
                • 提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。 属性值
                  • border新增
                    • linear-gradient:(线性渐变)
                      • radial-gradient :(径向渐变)
                      相关产品与服务
                      容器服务
                      腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档