笔记：重新认识CSS3
1、CSS3边框
- border-radius
- box-shadow
- border-image
2、CSS3背景
- background-image
- background-size
- background-origin
- background-clip
不同的背景图像可用逗号隔开
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
background-origin: content-box/padding-box/ border-box
background-origin属性指定了背景图像的位置区域
background-clip: content-box/padding-box/ border-box
background-clip属性规定背景的绘制区域
3、CSS3渐变
- linear-gradient 线性渐变 某个方向
- radial-gradient 径向渐变 由中心定义
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, green); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, green); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green); /* 标准的语法（必须放在最后
/* background: linear-gradient(to right, red, green); 渐变方向向右 */
/* background: linear-gradient(to bottom right, red, green); 渐变方向向右下角 */
/* background: linear-gradient(35deg, red, green); 渐变方向 渐变线35deg */
/* background: linear-gradient(to right, red, green, blue, orange); 使用多个颜色节点 */
/* background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 渐变颜色可设置透明度*/
/* background: repeating-linear-gradient(red, yellow 10%, green 20%); 可重复线性渐变 */
/* background: radial-gradient(red, green, blue); 径向渐变 */
/* background: radial-gradient(circle, red, yellow, green); 设置形状的径向渐变 */
}
</style>
Internet Explorer 9 及之前的版本不支持渐变。
4、CSS3文字效果
- text-shadow
- box-shadow
- text-overflow
- word-wrap
- word-break
文字效果 text sfdfsfsdfsfsf
<h5 style="text-shadow: 5px 5px 5px #FF0000;">文字效果 text sfdfsfsdfsfsf</h5>
text-overflow: ellipsis; 超出的文本 省略显示 ...
word-wrap:break-word; 允许长文本换行
word-break: keep-all/break-all 单词是否拆分换行
5、CSS3字体
可选择自己需要的字体
<style>
@font-face
{
font-family: myfontname;
src: url(font.woff);
}
div
{
font-family:myfontname;
}
</style>
6、CSS3转换
对元素进行移动、缩放、转动、拉长或拉伸。
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
transform属性
- translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
- rotate()方法，给定度数顺时针旋转元素。
- scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
- skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。
- rotateX(120deg);
- rotateY(130deg);
7、CSS3过渡
元素从一种样式逐渐改变为另一种的效果。
div
{
width:100px;
height:100px;
background:red;
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari or Chrome on MacOS*/
}
div:hover
{
width:300px;
}
transition属性
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
8、CSS3动画
@keyframes 创建动画
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@keyframes myframes
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myframes /* Safari 与 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
animation属性
- animation-name 规定 @keyframes 动画的名称
- animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0
- animation-timing-function 规定动画的速度曲线。默认是 "ease:慢快慢"；"linear:等速"；"ease-in:低速开始"
- animation-fill-mode，默认none; forwards: 当动画完成时，或当动画有一个延迟未开始播放时，要应用到元素的样式。
- animation-delay 规定动画何时开始。默认是 0
- animation-iteration-count 规定动画被播放的次数。默认是 1; "infinite:无限次播放"
- animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
9、CSS3分列
- column-count 分割的列数
- column-gap 列间间隙
- column-rule-style 列间边框
- column-rule-width 列间边框宽度
- column-rule-color 列间边框颜色
- column-rule
- column-span 指定元素跨越多少列 默认1，/ all
- column-width 列宽
div {
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
h2 {column-span: all;}
10、CSS3弹性布局
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
-
flex-direction: row | row-reverse | column | column-reverse
指定弹性子元素在父容器中的位置。 -
justify-content: flex-start | flex-end | center | space-between | space-around 指定在水平轴的内容对齐方式
-
align-items: flex-start | flex-end | center | baseline | stretch 子元素在纵轴方向上的对齐方式
-
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit 指定子元素换行方式
-
align-content: flex-start | flex-end | center | space-between | space-around | stretch
-
align-self: auto | flex-start | flex-end | center | baseline | stretch 子元素自身的对齐方式
