CSS3笔记(菜鸟教程）

1.CSS3边框:
(1).border-radius:创建圆角边框
(2).box-shadow:添加阴影
(3).border-image:用图片作为边框

2.CSS3圆角::
(1).这只是一个圆角边框如果定义background属性那么会有背景颜色

(2).这里是用图片来做背景颜色的代码

(3).边框的每个圆角
四个值:左上右上右下左下
三个值:左上右上和左下右下
两个值:左上和右下右上和左下
一个值:四个角相同
border-top-left-radious
border-top-right-radious
border-bottom-left-radious
border-bottom-right-radious
3.CSS3渐变
CSS3线性渐变(Linear Gradients)
（1).从上到下渐变

（2).从左到右渐变
（3).从左上角到右下角的渐变

（4).使用角度的渐变

0deg定义从左到右的渐变
90deg定义了从下到上的渐变
（5).多个颜色节点的渐变

（6).使用透明度的渐变

rgba最后一个参数是0-1的值，0表示完全透明1表示完全不透明
（7).重复性的线性渐变

CSS3径向渐变(radial-gradient)
（1).
shape size at posion:
closest-side at % %
farthest-side at % %
closest-corner at % %
farthest-corner at % %
shpe:elipse(默认椭圆)circle(圆形）等等
4.CSS3文本效果
text-shadow:文本阴影
box-shadow:盒子阴影
text-overflow:如何处理溢出内容
clip：溢出的内容…
ellipsis:直接忽略溢出的部分
word-wrap:长文本换行
break-word
word-break:单词拆分
keep-all:保留单词的完整性
break-all:不暴力单词的完整性一行满了就直接换行
5.CSS3 2D转换
（1).translate(x,y):沿着x y轴移动元素
translate(x):沿着x轴移动元素
translate(y):沿着y轴移动元素

（2).rotate(angle):旋转一定的角度
（3).scale(x,y):缩放旋转改变宽度和高度
（4).skew(x,y):沿着x,y轴倾斜转换
（5)matrix(******):六个参数包括旋转缩放平移倾斜
6.CSS3过渡

7CSS5动画
8.CSS3多列

（1).column-count:文本分为几列
（2).column-gap:定义列与列之间的间隙
（3).column-rule-style:指定了列与列间的边框样式
（4).column-rule-width:指定了两列边框厚度
（5).column-rule-color:指定两列边框颜色
（6).column-rule:所有属性的编写
（7).column-span:定义了元素跨越多少列
（8).column-width:定义了每列的宽度
9.CSS3用户界面
（1).resize:指定元素是否由用户调整大小
none:无法调整大小
both:可以调整大小
horizontal:可调整元素的宽度
vertical:可调整元素的高度

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

（3).outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

10.CSS3边框
CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:
11.CSS3弹性盒子

12.CSS3多媒体查询

CSS3笔记(菜鸟教程）相关推荐

HTML5笔记(菜鸟教程）
写了一篇笔记了,觉得整个页面效果乱乱的,这篇文章就再改变一下试一下小节加粗康康有没有好一点.最近希望自己学习效率可以高一点再高一点,最近网课上的我负能量满满这样不好不好.不知道大家写博客的时候用的是M ...
C#学习笔记——菜鸟教程C#学习重点归纳
C#学习笔记第一章:程序结构一.结构命名空间声明(Namespace declaration) 一个 class Class 方法 Class 属性一个 Main 方法语句(Statemen ...
python2.7教程-python2.7学习笔记——菜鸟教程
标准数据类型 Numbers(数字) String(字符串) List(列表) Tuple(元组) Dictionary(字典) list= ["runoob", 786, 2.2 ...
菜鸟教程java_JAVA笔记(菜鸟教程)
1.局部变量是在栈上分配的. 2.局部变量没有默认值,所以局部变量被声明后,必须经过初始化,才可以使用. 3.类变量(静态变量)和实例变量区别在于:类变量是所有对象共有,其中一个对象将它值改变,其他对 ...
菜鸟教程-css3学习笔记
学习链接是: https://www.runoob.com/css3/css3-tutorial.html ############################################## ...
C#(Csharp)基础教程(上)(菜鸟教程笔记)
博客已更新:C#(Csharp)基础教程(中)(菜鸟教程笔记) 内容包括:判断.循环.封装.方法.可空类型.数组.字符串.结构体.枚举. 目录 1. C# 及其开发环境简介 1.1 C# 概述 1.2 ...
读书笔记：NOSQL 菜鸟教程
读书笔记:NOSQL 菜鸟教程定义 NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL". NoSQL用于超大规模数据的存储.(例如谷歌或Facebo ...
C#(Csharp)基础教程(中)(菜鸟教程笔记)
前置博客为:C#(Csharp)基础教程(上)(菜鸟教程笔记) 内容包括:C#概述及开发环境简介.C# 程序结构.C# 基本语法.C# 数据类型.C# 类型转换.C# 变量.C# 常量.C# 运算符. ...
Python基础教程-菜鸟教程学习笔记1
Python基础教程-菜鸟教程学习笔记1 文章目录 Python基础教程-菜鸟教程学习笔记1 前言 Python 简介 1. 第一个Python程序 2. Python 中文编码 3. 基本语法 1) ...

CSS3笔记(菜鸟教程）

CSS3笔记(菜鸟教程）相关推荐

最新文章

热门文章