css3详解

一.什么是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属性

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/716489.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hexo图片显示不出且图片路径错误/.com//

参考博客: hexo 图片显示问题及使用typora设置图片路径-CSDN博客 javascript - hexo 图片路径错误/.com// - SegmentFault 思否 先说如何让hexo图片成功地显示出来 Step1: 修改config设置 将 _config.yml 设置文件中的 post_asset_folder 修改为 true 这一步的作…

windows下安装cnpm

cnpm是淘宝团队开发的一个针对中国用户的npm镜像源,它是npm的一个定制版本。由于国外的npm源在国内访问速度较慢,所以cnpm镜像源可以提供更快的下载速度。cnpm的使用方式与npm基本相同,只需将npm替换为cnpm即可。 要想使用cnpm等先安装node.…

反序列化逃逸 [安洵杯 2019]easy_serialize_php1

打开题目 题目源码&#xff1a; <?php$function $_GET[f];function filter($img){$filter_arr array(php,flag,php5,php4,fl1g);$filter /.implode(|,$filter_arr)./i;return preg_replace($filter,,$img); }if($_SESSION){unset($_SESSION); }$_SESSION["user&qu…

sizeof 和 strlen的区别

sizeof sizeof是单目操作符,sizeof计算变量所栈内存空间大小,单位是字节,如果操作数是类型的话,会计算类型所占大小,sizeof指在乎占用内存空间大小不在乎内容是什么. int main() {int a 0;printf("%zd\n", sizeof(a));printf("%zd\n", sizeof a );printf…

巧【二叉搜索树的最近公共祖先】【二叉搜索树的性质】Leetcode 235. 二叉搜索树的最近公共祖先

【二叉搜索树的最近公共祖先】【二叉搜索树性质】Leetcode 235. 二叉搜索树的最近公共祖先 【巧】解法1 利用二叉搜索树有序的性质解法2 采用二叉树求最近公共祖先的方法——后序遍历 ---------------&#x1f388;&#x1f388;235. 二叉搜索树的最近公共祖先 题目链接&#x…

Springboot+vue的制造装备物联及生产管理ERP系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的制造装备物联及生产管理ERP系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的制造装备物联及生产管理ERP系统&#xff0c;采用M&#xff…

AI学习集合-前瞻

AI学习前瞻 工作岗位 算法工程师机器学习工程师图像算法工程师ai工程师NLP高级算法工程师 学习路线 应用场景 计算机视觉技术应用场景 自然语言应用 AI流程 AI拟人流程 机器人历史数据经验模型规律依据模型预测未来依据规律做出判断 AI基本流程 术语所用到的技术手段数据数…

javascript中对包含关系判断介绍

本文将为您详细讲解 JavaScript 中对包含关系的判断&#xff0c;包括数组、字符串等&#xff0c;并提供相应的代码例子。 1. 数组包含关系判断 在 JavaScript 中&#xff0c;数组包含关系判断通常使用 Array.prototype.includes() 方法。这个方法返回一个布尔值&#xff0c;表示…

mac 本地使用dockerfile启动 springboot项目

1.创建Dockerfile放在项目的根目录下 2.编写Dockerfile FROM openjdk:11 MAINTAINER ChengLinADD target/JiaLi-0.0.1-SNAPSHOT.jar /app.jar# 暴露 Spring Boot 应用的端口号 EXPOSE 8088 # 启动 Spring Boot 应用 CMD ["java", "-jar", "app.jar&q…

前端学习第四天-css提升

达标要求 掌握css复合选择器 块级元素和行内元素及行内块的区别? 哪些元素是块元素,行内元素及行内块元素? 熟练掌握display的用法 能够说出css三大特性 熟练运用背景样式 1. CSS复合选择器 复合选择器是由两个或多个基础选择器&#xff0c;通过不同的方式组合而成的…

vue2结合electron开发跨平台应用(桌面端应用)

1.确定nodejs和electron的版本号 确定nodejs和electron的版本号及其重要&#xff0c;因为electron的开发版本需要指定的nodejs版本支持。 本文安装测试使用的是: 1.node18.19.0 2.npm10.2.3 3.vue-cli5.0.8 4.electron29.0.0 2.创建vue2项目 vue create elctron29.0.0_no…

zotero | 多平台同步 | 坚果云

zotero注册登陆 打开zotero软件&#xff0c;mac电脑打开首选项&#xff0c;如下图所示&#xff1a; 然后点击同步选项&#xff0c;如下图所示&#xff0c;如果已经有账号&#xff0c;请登陆账号&#xff0c;无则注册账号之后再登陆&#xff1b; 注册坚果云账号 注册完坚果…

求最短路径之BF算法

介绍 全称Bellman-Ford算法&#xff0c;目的是求解有负权边的最短路径问题。 考虑环&#xff0c;根据环中边的边权之和的正负&#xff0c;将环分为零环、正环、负环。其中零环、正环不会影响最短路径的求解&#xff0c;而负环会影响最短路径的求解。 可用BF算法返回一个bool值…

暗黑大气MT苹果CMS MT主题源码-PC版适用于苹果CMS V10

苹果CMS MT主题是一款多功能的主题&#xff0c;适用于苹果CMS V10的暗黑大气风格。 地 址 &#xff1a; runruncode.com/houtai/19704.html 初次使用说明&#xff1a; 在后台设置中&#xff0c;选择MT主题&#xff0c;并在模板目录中填写HTML。 后台地址为&#xff1a;MT主题…

*JAVAWEB--maven*

一:介绍: maven是一种专门管理以及构建JAVA项目的一个工具,maven屹立这么久也是因为其有三个非常好用的功能: 1.提供标准化的项目结构 比方说平时我们编写JAVA项目的时候,如果想把原本在eclipse当中编写的项目导入到IDEA当中进行使用,就会导致报错,因为这两个的项目结构并不一样…

图神经网络实战——基于DeepWalk创建节点表示

图神经网络实战——基于DeepWalk创建节点表示 0. 前言1. Word2Vec1.1 CBOW 与 skip-gram1.2 构建 skip-gram 模型1.3 skip-gram 模型1.4 实现 Word2Vec 模型 2. DeepWalk 和随机行走3. 实现 DeepWalk小结系列链接 0. 前言 DeepWalk 是机器学习 (machine learning, ML) 技术在图…

[Angular 基础] - routing 路由(上)

[Angular 基础] - routing 路由(上) 之前部分 Angular 笔记&#xff1a; [Angular 基础] - 生命周期函数 [Angular 基础] - 自定义指令&#xff0c;深入学习 directive [Angular 基础] - service 服务 终于到 routing 了……这部分的内容比我想象的要复杂很多&#xff0c;果…

力扣每日一题 用队列实现栈 模拟

Problem: 225. 用队列实现栈 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 力扣官解 辅助队列存栈顶元素主队列存逆序序列 复杂度 时间复杂度: 添加时间复杂度, 示例&#xff1a; O ( n ) O(n) O(n) 空间复杂度: 添加空间复杂度, 示例&#xff1a; O ( …

js监听网页iframe里面元素变化其实就是监听iframe变化

想要监听网页里面iframe标签内容变化&#xff0c;需要通过监听网页dom元素变化&#xff0c;然后通过查询得到iframe标签&#xff0c;再通过iframe.contentWindow.document得到ifram内的document&#xff0c;然后再使用选择器得到body元素&#xff0c;有了body元素&#xff0c;就…

Java和JavaScript之间的主要区别与联系

目录 概况 主要区别 联系 总结 概况 Java和JavaScript&#xff0c;尽管名字相似&#xff0c;但它们在编程世界中却扮演着截然不同的角色。Java&#xff0c;一种强类型、面向对象的编程语言&#xff0c;广泛应用于企业级应用和安卓应用开发。它的设计理念是一次编写&#x…