三分钟带你掌握 CSS3 的新属性

文章目录

          • 1. css3简介
          • 2. css3边框
            • 2.1 边框圆角
            • 2.2 边框阴影
          • 3. css3背景
            • 3.1背景图大小
            • 3.2背景图起始点
          • 4. css3文本效果
            • 4.1 文本阴影
            • 4.2 文本换行
          • 5. css3字体图标
          • 6. css32D转换
          • 7. css3 3D转换
          • 8. css3 transition
            • 8.1 单项改变
            • 8.2 单项改多项改变
          • 9. css3 动画

1. css3简介

CSS 用于控制网页的样式和布局,CSS3 是最新的CSS标准,CSS3 完全向后兼容,因此您不必改变现有的设计。浏览器通常支持 CSS2,但是现在大部分浏览器也实现了css3的很多特性。

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

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

在这里插入图片描述

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

Firefox、Chrome 以及 Safari 支持所有新的边框属性。

border-radius(边框圆角)语法如下:

border-radius:10px;代表四个方向都有一个微微的圆角

border-radius:50%;代表是正圆

2.2 边框阴影

在这里插入图片描述

box-shadow(边框阴影)语法如下:

div{box-shadow: 10px 10px 5px #888888;
}

第一个值代表阴影的水平偏移量,第二个值代表阴影的垂直偏移量,第三个值代表阴影的模糊度,第四个值代表阴影的颜色

3. css3背景
3.1背景图大小

background-size(背景图大小)

background-size:100px 100px; 可以给具体的数值

background-size:50% 50%; 可以给百分百 相对于父元素来说

background-size:cover; 会拉伸图片,填满div

在这里插入图片描述

background-size:contain; 拉伸图片的时候一个方向填满了,另一个方向停止了

在这里插入图片描述

3.2背景图起始点

background-origin这个属性可以设置背景图到底是以content、padding还是border为起点来放置背景图

在这里插入图片描述

而且css3还允许一个div放置多张背景图

在这里插入图片描述

4. css3文本效果
4.1 文本阴影

在这里插入图片描述

text-shadow是规定文本阴影的,第一个值是阴影的水平偏移量,第二个值是阴影的垂直偏移量,第三个值是模糊度,第四个值是阴影的颜色。

h1{
text-shadow: 5px 5px 5px #FF0000;
}
4.2 文本换行

CSS3 自动换行

允许对长单词进行拆分,并换行到下一行:

p {word-wrap:break-word;}
5. css3字体图标

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3,web 设计师可以使用他们喜欢的任意字体。
在这里插入图片描述

当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

先定义自己的字体名称然后使用自己定义的字体

<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}</style>

当然我们一般使用阿里巴巴矢量图标库引用字体文件比较多,前面已经讲过,这里不赘述。

6. css32D转换

通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

语法如下:

translate()

div{transform: translate(50px,100px);-ms-transform: translate(50px,100px);		/* IE 9 */-webkit-transform: translate(50px,100px);	/* Safari and Chrome */-o-transform: translate(50px,100px);		/* Opera */-moz-transform: translate(50px,100px);		/* Firefox */}

rotate()

div{transform: rotate(30deg);-ms-transform: rotate(30deg);		/* IE 9 */-webkit-transform: rotate(30deg);	/* Safari and Chrome */-o-transform: rotate(30deg);		/* Opera */-moz-transform: rotate(30deg);		/* Firefox */}

scale()

div{transform: scale(2,4);-ms-transform: scale(2,4);	/* IE 9 */-webkit-transform: scale(2,4);	/* Safari 和 Chrome */-o-transform: scale(2,4);	/* Opera */-moz-transform: scale(2,4);	/* Firefox */}

skew()

div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg);	/* IE 9 */-webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */-o-transform: skew(30deg,20deg);	/* Opera */-moz-transform: skew(30deg,20deg);	/* Firefox */}
7. css3 3D转换

在这里插入图片描述

在这里插入图片描述

8. css3 transition
8.1 单项改变
div{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}
8.2 单项改多项改变
div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;}

在这里插入图片描述

9. css3 动画
语法如下:
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

在这里插入图片描述

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

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

相关文章

用 div 仿写 input 和 textarea 功能

div仿写input和textarea input不能换行&#xff0c;textarea也不能跟随内容多少而增加高度。 contenteditable true; <div class"msg_content" contenteditable"true" placeholder在这里输入您的留言或建议></div> .msg_content {box-sizing:…

Vue项目中如何设置动态的TDK

TDK是什么 TDK就是网站的标题&#xff08;title&#xff09;、描述&#xff08;description&#xff09;和关键词&#xff08;keyword&#xff09; TDK在哪里 上面大佬对TDK的概念解释的很全面&#xff0c;但是在网页中的TDK在哪里呢&#xff0c;作为开发人员打开F12我们就…

[Pytorch]Pytorch的tensor变量类型转换

原文&#xff1a;https://blog.csdn.net/hustchenze/article/details/79154139 Pytorch的数据类型为各式各样的Tensor,Tensor可以理解为高维矩阵。与Numpy中的Array类似。Pytorch中的tensor又包括CPU上的数据类型和GPU上的数据类型&#xff0c;一般GPU上的Tensor是CPU上的Tenso…

PHP从零开始--基础篇

一、 变量 1.1概念 变量是存储数据的用的容器。 1.2定义变量 变量名的语法规则&#xff1a; 可以是数字、字母、下划线&#xff0c;但是不能以数字开头不能出现空格变量名是区分大小写变量名不能是系统中的关键字行业约定的语法规范 驼峰命名法 比如 myname 定义成 myNam…

node

‎ Table of Contents 1. 全局对象2. 代码执行优先级3. 模块导入4. 模块加载 4.1. 文件模块优先级4.2. 文件夹加载优先级 4.2.1. 包&#xff08;文件夹&#xff09;下的入口文件优先级4.2.2. 包加载优先级5. 核心模块的简单使用 5.1. events1 全局对象 globalconsole.log(globa…

一个关于WCF调用远程链接返回405错误不允许使用此方法的问题

最近在调试WCF的接口时一直返回“405不允许使用此方法”&#xff0c;这个问题困扰了大半天&#xff0c;网上查了各种办法&#xff0c;但是每个人遇到的问题不同还是不能解决。 最后无意之中发现问题所在&#xff0c;记录一下帮助后面的同学解决问题。 WCF远程方法会配置属性Web…

PHP从零开始--循环数组

一、循环 1.1单层for循环 1.1.1基础语法 for(初识变量;结束范围;累加/累减){ 重复执行的代码 } 1、 先初识化变量$i 2、 $i<100表达式进行判断 3、 跳入循环&#xff0c;执行重复代码 4、 累加或者累加 5、 再进行$i<100表达式判断 6、 再跳入循环&#xff0c;执行重复…

Spring Cloud(F版)搭建高可用服务注册中心

上一篇文章【Spring Cloud搭建注册中心】成功搭建了一个Eureka Server服务注册中心&#xff0c;不过相信细心的朋友都会发现&#xff0c;这个服务注册中心是一个单节点服务注册中心&#xff0c;万一发生故障或者服务器宕机&#xff0c;那所有的服务可就不能使用了&#xff0c;这…

Python(60)_闭包

1 、闭包的概念 #-*-coding:utf-8-*- 1、闭包&#xff1a;内部函数调用外部函数的变量def outer():a 1def inner():print(a)print(inner.__closure__) outer() print(outer.__closure__) 2 闭包的使用 #-*-coding:utf-8-*- 1、闭包&#xff1a;内部函数调用外部函数的变量 …

PHP从零开始--错误处理函数

一、错误处理 1.1错误种类 1.1.1Notices 比如没有定义变量确使用了会报notice错误&#xff0c;只是提醒注意&#xff0c;不影响后续代码执行 1.1.2Warnings 这是警告错误&#xff0c;比如include引入一个并不存在的文件&#xff0c;不影响后续代码执行 1.1.3Fatal Erro…

第四单元博客总结——暨OO课程总结

第四单元博客总结——暨OO课程总结 第四单元架构设计 第一次UML作业 简单陈述 第一次作业较为简单&#xff0c;只需要实现查询功能&#xff0c;并在查询的同时考虑到性能问题&#xff0c;即我简单的将每一次查询的结果以及递归的上层结果都存储下来&#xff0c;使用一个Boolean…

两列布局:6种方法

面试过程中总会文档两列布局&#xff0c;左边等宽&#xff0c;右边自适应几种方法&#xff1f;以下提供6种为君解忧 <div id"wrap"><div id"left"></div><div id"right"></div> </div>需求就是左侧定宽&…

PHP从零开始--数据库

文章目录一、 数据库简介1.1概念1.2命令行操作1.3连接数据库1.4配置环境变量二、 数据库的相关操作2.1显示所有仓库2.2创建仓库2.3删除仓库2.4切换仓库三、 数据表的相关操作3.1概念3.2显示所有的数据表3.3创建数据表3.2修改字段名3.3查看表结构3.4添加字段3.5删除字段3.6更改数…

常用SQL语句

将记录的某一字段值设置为空&#xff08;null&#xff09;UPDATE 表名 SET 字段名NULL WHERE 条件字段名123; 更新整列为某个值UPDATE 表名 SET 字段名NULL 转载于:https://www.cnblogs.com/zhcBlog/p/10254066.html

如何下载js类库

https://bower.io/ 这个已经淘汰 https://learn.jquery.com/jquery-ui/environments/bower/ Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you. Keeping track of all these packages and mak…

Python 常用系统模块整理

Python中的常用的系统模块中部分函数等的整理 random: 随机数sys: 系统相关os: 系统相关的subprocess: 执行新的进程multiprocessing: 进程相关threading: 线程相关pickle: 将对象转换成二进制文件time: 时间datetime: 基本的日期和时间类型timeit: 准确测量小段代码的执行时间…

PHP从零开始--字段修饰符数据操作SQL语言

文章目录一、 字段修饰符1.1主键1.2自动增长1.3非空1.4默认值1.5外键二、 对数据的操作2.1增加数据2.2删除数据2.3更新数据2.4查询数据2.4.1查询所有的数据2.4.2查询指定字段2.4.3去除重复字段2.4.4where表达式详解2.4.5分组查询2.4.6排序三、 SQL语言3.1DML3.2DDL3.3DCL一、 字…

scrapy爬虫框架windows下的安装问题

windows操作系统python版本是3.6.0通过Anaconda命令conda install scrapy安装scrapy,安装过程中没有问题。然后在命令行输入命令准备新建项目时&#xff0c;输入 scrapy startproject firstscrapy时出现了from cryptography.hazmat.bindings._openssl import ffi, libImportErr…

charles使用说明(基于mac)

1. Charles简介 1.1 Charles 需要java的运行环境支持&#xff0c;支持Windows、Mac&#xff1b;Fiddler不支持Mac。故Charles是在Mac下常用的网络封包截取工具。 1.2 Charles原理&#xff1a;通过将自己设置成系统的网络访问代理服务器&#xff0c;使得所有的网络访问请求都通过…

看完就懂的连表查询

文章目录一、表与表之间的关系1.1一对一1.2一对多1.3多对多二、 连表查询2.1概念2.2笛卡尔积2.3内连接2.4外连接2.4.1左外连接2.4.2右外连接2.4.3全连接2.4.4navicat导入导成sql语句2.4.5练习三、 子查询3.1概念3.2练习3.2.1查询工资最高的员工所有信息3.2.2查询工资比7654工资…