[外链图片转存失败(img-yfi1VPyy-1563434266398)(https://upload-images.jianshu.io/upload_images/11158618-fc8784aa1868fbb5.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

CSS3 完全向后兼容

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

[外链图片转存失败(img-v3cEr47w-1563434266400)(https://upload-images.jianshu.io/upload_images/11158618-722281d083eec175.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-huN4JfPI-1563434266401)(https://upload-images.jianshu.io/upload_images/11158618-f7d4183236cb28f3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

<style>
div
{
border:2px solid black;
padding:10px 40px;
background:pink;
width:200px;
border-radius:25px;
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>

box-shadow属性被用来添加阴影

[外链图片转存失败(img-KgilfMkV-1563434266402)(https://upload-images.jianshu.io/upload_images/11158618-40ac51600b2d8472.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

<style>
div
{
width:200px;
height:100px;
background-color:pink;
box-shadow: 10px 10px 5px gray;
}
</style>
</head>
<body>
<div>盒阴影</div>
</body>

border-image 属性允许指定一个图片作为边框

<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round
{
-webkit-border-image:url(img/border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(img/border.png) 30 30 round; /* Opera */
border-image:url(img/border.png) 30 30 round;
}
#stretch
{
-webkit-border-image:url(img/border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(img/border.png) 30 30 stretch; /* Opera */
border-image:url(img/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">图像平铺(重复)来填充该区域。</div>
<br>
<div id="stretch">图像被拉伸以填充该区域。</div>
<p>这是我们使用的图片素材:</p>
<img src="img/border.png" />
</body>

background-image属性添加背景图片

background-size指定背景图像的大小

background-origin属性指定了背景图像的位置区域

div
{
border:1px solid black;
padding:35px;
background-image:url(img/smile.png);
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}

CSS3 文本效果

text-shadow 可向文本应用阴影

[外链图片转存失败(img-owjA0klP-1563434266408)(https://upload-images.jianshu.io/upload_images/11158618-a6d32d00598d7bdc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

<style>
h1
{
text-shadow: 5px 5px 5px gray;
}
</style>
</head>
<body>
<h1>文本阴影效果</h1>

word-wrap属性允许文本强制换行

<style>
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>

[外链图片转存失败(img-pDsBONIz-1563434266410)(https://upload-images.jianshu.io/upload_images/11158618-dc8345016b343c2f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

CSS3 字体

@font-face规则

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

CSS3 2D转换

2D转换方法translate()

left(x 轴) 和 top(y 轴)

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

[外链图片转存失败(img-fH8XYvEk-1563434266412)(https://upload-images.jianshu.io/upload_images/11158618-9a2906218577645c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

2D转换方法rotate()

通过 rotate() 方法,元素顺时针旋转给定的角度。

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

[外链图片转存失败(img-foai8Whk-1563434266413)(https://upload-images.jianshu.io/upload_images/11158618-022076c37057e6c8.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数

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

skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。

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

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

CSS3 3D转换

3D转换方法rotateX()

通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}

3D转换方法rotateY()

通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}

CSS3 过渡

div:hover{width:300px;}

div
{
transition: width 1.5s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */}

CSS3 动画

@keyframes规则

多列

column-count属性规定元素应该被分隔成几列。

div
{
column-count:5;
-moz-column-count:5; /* Firefox */
-webkit-column-count:5; /* Safari 和 Chrome */
}

column-gap属性规定列之间的间隔。

div
{
column-gap:40px;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
}

column-rule属性设置列之间的宽度、样式、颜色。

div
{
column-rule:5px outset pink;
-moz-column-rule:5px outset pink; /* Firefox */
-webkit-column-rule:5px outset pink; /* Safari and Chrome */
}

[外链图片转存失败(img-PwFkBBSq-1563434266416)(https://upload-images.jianshu.io/upload_images/11158618-115dc7af4da98f1c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

CSS3 用户界面

div
{
resize:both;
overflow:auto;
}

box-sizing 属性允许以确定的方式定义适应某个区域的具体内容。

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

[外链图片转存失败(img-fJ0SiLPR-1563434266416)(https://upload-images.jianshu.io/upload_images/11158618-0e83a33f40f66a64.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid pink;
outline-offset:15px;
}
</style>

[外链图片转存失败(img-ymKLm6j0-1563434266417)(https://upload-images.jianshu.io/upload_images/11158618-e761775991035b94.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]


请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达叔小生的简书!

这是一个有质量,有态度的博客

[外链图片转存失败(img-PGGdTK96-1563434266417)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

【一起来烧脑】一步学会CSS3体系的更多相关文章

  1. 【一起来烧脑】一步学会JavaScript体系

    [外链图片转存失败(img-b0GOhxRY-1563571645197)(https://upload-images.jianshu.io/upload_images/11158618-ba249b ...

  2. 【一起来烧脑】一步学会HTML体系

    [外链图片转存失败(img-zk4xNuy1-1563431241992)(https://upload-images.jianshu.io/upload_images/11158618-4e9cac ...

  3. 10 个轻松学会 CSS3 的优秀在线资源

    本文包揽 CSS 的所有关键点,并且引入了最新的 CSS3 版本.这个先进的技术提供超级多的新标签和属性,使得 Web 设计构建创新更简单,帮助开发者创建具有新趋势,带有漂亮布局的 Web 页面.随着 ...

  4. Java基础:三步学会Java Socket编程

    Java基础:三步学会Java Socket编程 http://tech.163.com 2006-04-10 09:17:18 来源: java-cn 网友评论11 条 论坛        第一步 ...

  5. tortoisegit 7步 学会git分支

    tortoisegit 7步 学会git分支 做自己的产品,分支还是很重要的.例如,我发布了一个app,但是有bug,又想做新功能,怎么办呢?如果只在一个git上开发的话,bug会越来越多,原来bug ...

  6. 【一起来烧脑】一步学会TypeScript入门

    [外链图片转存失败(img-rmJXMGFs-1563388353181)(https://upload-images.jianshu.io/upload_images/11158618-dd813e ...

  7. 【一起来烧脑】一步学会AngularJS系统

    AngularJS是一个JavaScript框架 一个用JavaScript编写的库 [外链图片转存失败(img-JUTh171K-1563341248796)(https://upload-imag ...

  8. 【一起来烧脑】一步学会Vue.js系统

    Vuejs是一个构建数据驱动的web界面的库,通过api实现响应的数据绑定和组合的视图组件,Vue.js的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单,一旦创建了绑定,DOM 将与数 ...

  9. 3步学会用gulp

    1.安装gulp 安装gulp到全局:npm install -g gulp 安装gulp到某个项目:npm install --save gulp 注意:请先安装nodejs(自带npm) 2.创建 ...

随机推荐

  1. 深度优先搜索(DFS)思路及算法分析

    1.算法用途: 用于遍历图中的节点,有些类似于树的深度优先遍历.这里唯一的问题是,与树不同,图形可能包含循环,因此我们可能会再次来到同一节点. 2.主要思想: 借用一个邻接表和布尔类型数组(判断一个点 ...

  2. 缓存的设计及PHP实现LFU

    1. 恒定缓存性能有哪些因素? 命中率.缓存更新策略.缓存最大数据量. 命中率:指请求缓存次数和缓存返回正确结果次数的比例.比例越高,缓存的使用率越高,用来衡量缓存机智的好坏和效率.如果数据频繁更新, ...

  3. netcore 版本升级 导致的cookie验证失败

    排查了两天的问题,本来都是运行正常的cookie验证,突然不好用了,服务器获取不到cookie信息. 我确实是升级了.netcore sdk,之前是2.2.102,后来升级成了2.2.107,一开始并 ...

  4. C# 生成随机的6位字母,包含大小写

    今天自己做项目需要生成随机的6位字母,于是自己写了一个,下面代码是可以生成任意位数字母的. string _zimu = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg ...

  5. 删除链表的倒数第 n 个节点

    难度: 中等 leetcode地址: https://leetcode.com/problems/remove-nth-node-from-end-of-list/description/ 分析: 1 ...

  6. JavaScript 自己写一个 replaceAll() 函数

    JavaScript 的  replace()  方法可以在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 但是,只输入字符串的话,仅替换第一个字符,当然也可以用正则表达式来进行 ...

  7. ORM 查询练习

    目录 ORM 查询练习 表结构 练习题 测试数据 准备 参考答案 ORM 查询练习 表结构 # 书 class Book(models.Model): title = models.CharField ...

  8. RabbitMQ实战场景(一):异步记录用户操作日志

    传统的项目开发中业务流程以串行方式,执行了模块1—>模块2–>模块3 而我们知道,这个执行流程其实对于整个程序来讲是有一定的弊端的,主要有几点: (1)整个流程的执行响应等待时间比较长; ...

  9. uboot使用脚本

    使用mkimage命令 # mkimage -A ARM -O linux -T script -C none -n "script" -d *.sh *.img # tftp x ...

  10. python(if判断)

    一.if判断 如果 条件满足,才能做某件事情, 如果 条件不满足,就做另外一件事情,或者什么也不做 注意: 代码的缩进为一个 tab 键,或者 4 个空格 在 Python 开发中,Tab 和空格不要 ...