css3-常见应用-2018-5-19

2 背景 设置图片为背景-可以对body设置背景图==
background:url(/i/bg_flower.gif);
background-size:63px 100px;
多个背景图
background-image:url(bg_flower.gif),url(bg_flower_2.gif);

可以指定到指定边框==

3 文本
text-shadow: 5px 5px 5px #FF0000; 添加阴影
h1
{
text-shadow: 5px 5px 5px #FF0000;
}

自动换行
p {word-wrap:break-word;}

4 字体
设置需要的字体和格式==

5 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸
translate()
rotate() rotate(30deg) 把元素顺时针旋转 30 度。
scale() scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
skew() 翻转 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
matrix()
对整个div进行拉伸==
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

transform:skew(30deg,20deg);
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

6 过渡！！
鼠标悬停时候，展示
div:hover
{
width:300px;
transition:width 1s; 不写默认是0s
}

7 动画渐变
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
http://www.w3school.com.cn/css3/css3_animation.asp

8 分列！！
column-count:3;
column-gap:30px; 中间的间隔

9 用户界面

outline-offset:15px; 指定轮廓 不暂空间
border:2px solid black;
outline:2px solid red;
outline-offset:15px;

可以学习
float left

http://www.w3school.com.cn/tiy/t.asp?f=css3_box-sizing


选择器：
http://www.w3school.com.cn/cssref/css_selectors.asp
.class 类
#id
[attribute=value] [name="hello"]

div p 选择 <div> 元素内部的所有 <p> 元素。
单位 % px像素