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 子元素自身的对齐方式

笔记:重新认识CSS3的更多相关文章

  1. 学习笔记day6:CSS3动画属性

    总结: 1: CSS动画:@keyframes  animation:ie10+:加-webkit前缀: animation 则是属于关键帧动画的范畴; 它本身被用来替代一些纯粹表现的javascri ...

  2. 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  3. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  4. 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

  5. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

  6. CSS3主要知识点复习总结+HTML5新增标签

    文件夹: 1.CSS 属性编写顺序 2.CSS3属性(内核前缀) 3.position相对/绝对定位 4.overflow:scroll等的差别 5.display属性应用 6.盒模型计算方法和Bug ...

  7. css3两个汤圆亲吻动效

    效果图: 模板来源:https://www.17sucai.com/pins/demo-show?id=35132 自己仿写出来的效果图: 笔记: 1.transform:translate(-50% ...

  8. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  9. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  10. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

随机推荐

  1. hibernate的查询缓存和二级缓存的配合使用

    我的上一篇博客Hibernate缓存体系之查询缓存(query cache),以及list和iterate方法的差别介绍了查询缓存的概念,以及list和iterate的差别.读者可能注意到:那篇博客測 ...

  2. Ajax的简单实现

    Ajax的实现需要服务器端和客户端配合来实现 下面看服务器端的代码,也就是用php编写的一个后台脚本文件 <?php //设置页面内容,编码格式是utf8 header("Conten ...

  3. strncpy和strlen的可能的实现

    #include <stdio.h> #include <stdlib.h>//为避免与标准库中的函数发生混淆,我将它们命名为stringNCopy和stringLength ...

  4. hdoj 1875 畅通project再续【最小生成树 kruskal &amp;&amp; prim】

    畅通project再续 Problem Description 相信大家都听说一个"百岛湖"的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其它的小岛时都要通过划小船来实现. ...

  5. <转载>调制与解调电路详解

    原文链接:http://www.elecfans.com/analog/20120509270848_4.html 调幅和检波电路 广播和无线电通信是利用调制技术把低频声音信号加到高频信号上发射出去的 ...

  6. BusyBox下ftpget的使用方法

    在终端输入ftpget命令,可以得到以下帮助信息: BusyBox v1.17.4 (2010-12-22 10:59:18 CST) multi-call binary. Usage: ftpget ...

  7. ruby 学习网站

    Ruby on Rails官网: http://rubyonrails.org/ Rails Guides:http://guides.rubyonrails.org/ -中文版: http://gu ...

  8. mysql优化-------Myisam与innodb引擎,索引文件的区别

    Myisam与innodb引擎,索引文件的区别: innodb的次索引指向对主键的引用. myisam的次索引和主索引都指向物理行. myisam一行一行的插入,会产生一行一行的文件,磁盘上有数据文件 ...

  9. 设置Tomcat的jvm内存问题

    tomcat的jvm大小设置与操作系统以及jdk有关:具体来说: 1.操作系统是32bit的,程序最大内存访问空间是4G, 2的32次方,这是硬件决定的,跟windows linux没有任何关系. 2 ...

  10. 特殊的shell变量:

    特殊的shell变量: $0 获取当前执行的shell脚本的文件名 $n 获取当前执行的shell脚本的第n个参数值,n=1..9 $* 获取当前shell的所有参数 “$1 $2 $3 …注意与$# ...