一:CSS3 圆角
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
注意: 这个属性允许你为元素添加圆角边框!
CSS3 border-radius - 指定每个圆角
如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。
但是,如果你要在四个角上一一指定,可以使用以下规则:
- 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
- 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
- 一个值: 四个圆角值相同
二:CSS3 背景
1. background-size 属性:background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。
您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>background-size</title> 6 <style> 7 body 8 { 9 background:url(/try/demo_source/img_flwr.gif); 10 background-size:80px 60px; 11 background-repeat:no-repeat; 12 padding-top:40px; 13 } 14 </style> 15 </head> 16 <body> 17 <p> 18 Lorem ipsum,中文又称“乱数假文”, 是指一篇常用于排版设计领域的拉丁文文章 ,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。 19 </p> 20 21 <p>原始图片: <img src="/try/demo_source/img_flwr.gif" alt="Flowers" width="224" height="162"></p> 22 23 </body> 24 </html>
效果图;
2.CSS3的background-Origin属性:background-Origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
3.CSS3 background-clip属性:CSS3中background-clip背景剪裁属性是从指定位置开始绘制
三:CSS3 文本效果
1.CSS3 的文本阴影:CSS3 中,text-shadow属性适用于文本阴影。
2.CSS3 box-shadow属性:CSS3 中 CSS3 box-shadow 属性适用于盒子阴影
3.CSS3 text-overflow 属性:text-overflow属性指定当文本溢出包含它的元素,应该发生什么。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <style> 7 div.test 8 { 9 white-space:nowrap; 10 width:12em; 11 overflow:hidden; 12 border:1px solid #000000; 13 } 14 </style> 15 </head> 16 <body> 17 18 <p>以下 div 容器内的文本无法完全显示,可以看到它被裁剪了。</p> 19 <p>div 使用 "text-overflow:ellipsis":</p> 20 21 <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div> 22 <p>div 使用 "text-overflow:clip":</p> 23 <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div> 24 <p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p> 25 <div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div> 26 </body> 27 </html>
效果:
四:CSS3 transform 属性
一:2D 转换
1.translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
2.rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
3.scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
4.skew() 方法:包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
5.matrix()方法和2D变换方法合并成一个。matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
二:3D转换
五:CSS3 过渡
transition 属性设置元素当过渡效果,四个简写属性为:
- transition-property:规定应用过渡的 CSS 属性的名称。
- transition-duration:定义过渡效果花费的时间。默认是 0。
- transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。
- transition-delay:规定过渡效果何时开始。默认是 0。
六:CSS3 动画
animation:
animation-name: 动画的名字,必须与@keyframes配合使用
@keyframes 定义关键帧动画,名字随便取,上面调用的时候用这个名字即可
animation-duration: 动画的时间。从0 - 100 的时间
animation-timing-function : 参照前面过渡的 默认值是ease
steps(<integer>[, [ start | end ] ]?)
step-start:等同于 steps(1, start)
step-end:等同于 steps(1, end)
animation-delay: 动画的延迟时间 默认值是0s
animation-iteration-count:动画的循环次数 默认值是一次
infinite:无限循环
animation-direction : 必须建立在循环的基础之上的
normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行
animation-fill-mode 动画本身是完成以后要恢复到初始的状态
none:不设置对象动画之外的状态
forwards:保留动画最后一帧的状态
backwards:动画开始前直接以第一帧的形式展现
both:想设置这两个都有效果,就用both
animation-play-state: 取值可以是paused 让动画暂停
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 @keyframes change-color{ 8 0%{ 9 background-color: red; 10 11 } 12 25%{ 13 background-color: green; 14 } 15 50%{ 16 background-color: yellow; 17 } 18 75%{ 19 background-color: blue; 20 } 21 100%{ 22 background-color: brown; 23 } 24 } 25 div{ 26 width: 100px; 27 height: 100px; 28 background-color: black; 29 30 animation: change-color 10s steps(5,end); 31 /*start 保留下一帧状态,知道动画结束 */ 32 /*end 保留当前帧状态,直到动画结束*/ 33 34 } 35 </style> 36 </head> 37 <body> 38 <div></div> 39 </body> 40 </html>
七:CSS3 弹性盒子(Flex Box)
flex布局:
1.在使用flex布局是,必须先指定布局为flex布局; display:flex;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <style> 7 .flex-container { 8 display: -webkit-flex; 9 display: flex; 10 width: 400px; 11 height: 250px; 12 background-color: lightgrey; 13 } 14 15 .flex-item { 16 background-color: cornflowerblue; 17 width: 100px; 18 height: 100px; 19 margin: 10px; 20 } 21 </style> 22 </head> 23 <body> 24 25 <div class="flex-container"> 26 <div class="flex-item">flex item 1</div> 27 <div class="flex-item">flex item 2</div> 28 <div class="flex-item">flex item 3</div> 29 </div> 30 31 </body> 32 </html>
效果图:
2.flex-direction: 规定了主轴的方向
取值:
row:主轴 方向
row-reverse:主轴反向
column:纵向
column-reverse : 纵向反向
3.flex-wrap:规定是否换行;
4.基于主轴对齐方式
justify-content;
取值:
flex-start flex-end center space-between space-around
5.基于交叉轴对齐方式:
align-items;
取值:
flex-start flex-end center
6.基于 文本对齐方式:baseline
stretch 设置这个属性的时候,里面没有高度的 时候会撑满
7.基于交叉轴对齐方式(适用于多行)
align-content
取值:
flex-start flex-end center space-between space-around