css3详解

一.什么是CSS3

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

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

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

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

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

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

有兴趣加一下社区:http://t.csdnimg.cn/nl4Fi

相关推荐
Da Da 泓42 分钟前
五子棋 Web 端测试用例报告
前端·网络·websocket·网络协议·测试用例·项目
zxcvb1532 小时前
远程查看本地文档:一条轻量 Web 文件服务的工程化链路
前端·远程查看文档
niucloud-admin2 小时前
NIUCLOUD PHP SAAS上门家政使用文档:城市管理
java·前端·php
北岛贰2 小时前
啵啵音乐迎来全新升级!
前端
hkNaruto4 小时前
【AI】基于大模型的AI游戏地图生成、控制方案:AI Native Game Harness 迁移操作手册
前端·人工智能·游戏
IT_陈寒4 小时前
Java序列化踩坑记:对象循环引用让我加班两小时
前端·人工智能·后端
Acro4 小时前
快给macOS 上的Grok Bot换一套皮肤
前端
flash俊杰4 小时前
双引擎 OCR 编排:逐页判定、视觉优先、partial 语义与三层超时
前端
计算机魔术师4 小时前
Reddit 每周被 Google 偷走 100 万次点击,CEO 摊牌了
前端
前端繁华如梦4 小时前
用 React Three Fiber 做一栋能编辑的教学楼数字孪生
前端