CSS3
关注
分享
扫一扫
css3知识点总结与示例
水晶果冻1125
这个作者很懒，什么都没留下…
展开
-
HTML5学习第2篇——hack 技术
hack原创 2018-09-18 17:21:25 · 920 阅读 · 0 评论 -
CSS3学习第10篇——综合练习魔方
目标：实现一个旋转的魔方代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3 综合练习 魔方</title> <style type="text/css&qu原创 2018-12-21 23:02:37 · 326 阅读 · 0 评论 -
CSS3学习第9篇——flex弹性（伸缩）布局
一、Flex布局是什么？布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。二、Flex布局是什么？...原创 2018-12-21 22:56:52 · 225 阅读 · 0 评论 -
CSS3学习第8篇——动画
CSS3 动画属性（Animation）属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完...原创 2018-12-21 22:49:00 · 176 阅读 · 0 评论 -
CSS3学习第7篇——2D/3D转换
过渡属性（Transition）过渡属性：用于目标元素的css属性值（由transition-property 属性规定）改变时，页面展示的过渡效果。属性 描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property 规定应用过渡的 CSS 属性的名称。 3 transitio...原创 2018-12-21 22:41:37 · 248 阅读 · 0 评论 -
CSS3学习第6篇——2D/3D转换
2D/3D 转换属性（Transform）属性 描述 CSS transform 向元素应用 2D 或 3D 转换。 3 定义和用法transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。语法transform: none|transform-functions; 2D转换示例： <!...原创 2018-12-21 15:06:25 · 279 阅读 · 0 评论 -
CSS3学习第5篇——线性渐变和径向渐变
1、用途线性渐变和径向渐变可用于区域背景色的填充，提升页面的展示效果。2、线性渐变linear-gradient 1)方向（to bottom、to top、to right、to left、to bottom right，等等）,颜色,颜色... background: linear-gradient(direction, color-s...原创 2018-12-21 11:57:05 · 803 阅读 · 0 评论 -
CSS3学习第4篇——边框图片
1、border-image边框图片属性 描述 CSS border-image 简写属性，设置所有 border-image-* 属性。 3 border-image-outset 规定边框图像区域超出边框的量。 3 border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretc...原创 2018-12-21 11:47:28 · 352 阅读 · 0 评论 -
CSS3学习第3篇——圆角与阴影
1、圆角border-radius属性 描述 CSS border-radius 简写属性，设置所有四个 border-*-radius 属性。 3 border-bottom-left-radius 定义边框左下角的形状。 3 border-bottom-right-radius 定义边框右下角的形状。 3 border-top...原创 2018-12-21 11:36:18 · 408 阅读 · 0 评论 -
CSS3学习第2篇——选择器总结
1、背景css的选择器太多了，有一些选择器感觉很像，但又有细微的差别，只有真正的使用才能感觉到。现将容易混淆的选择器做一下对比和总结。2、div p与div>p选择器 例子 例子描述 CSS element element div p 选择 <div> 元素内部的所有 <p> 元素。 1 element>e...原创 2018-12-14 10:56:35 · 420 阅读 · 0 评论 -
CSS3学习第1篇——background-clip、background-origin详解
css3中新增的background属性学习属性 描述 CSS background-clip 规定背景的绘制区域。 3 background-origin 规定背景图片的定位区域。 3 background-size 规定背景图片的尺寸。 3 1、background-origin属性规定 background-positi...原创 2018-12-13 14:55:05 · 1650 阅读 · 0 评论 -
深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。 第一部分：...转载 2018-11-22 22:24:14 · 465 阅读 · 0 评论 -
HTML5学习第3篇-HTML5的前世今生和设计理念
引言想要深入的了解一个人就必须要知道这个人的过往经历和成长背景，因为是这些经历的叠加成就了这个人现在的样子。就像梁宁老师说的，一个人所表现出的样子就是这个人过往经历的叠加。学技术也一样，想深入的了解一门技术也需要知道技术的前世今生和设计理念。知道这些才知道语言真正的生命力，知道语言的背回是哪些人在为其付出努力，是不是你认可的模式。以下分享个人学习的总结图：HTML5的前世和今生说说它的背景...原创 2018-09-21 12:00:52 · 728 阅读 · 0 评论 -
原 CSS3学习第11篇——综合练习弹跳滚动的小球
目标：一个小球从空中落下，然后弹起、落下、弹起落下……，向右滚动，最后停止，根据受力情况的不同进行缩放变形。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3 弹跳的小球</title&g原创 2018-12-21 23:08:18 · 629 阅读 · 0 评论