CSS3 边框

border-radius: 圆角

border-radius: 15px 50px 70px 100px; 左上 右上 右下 左下

box-shadow:阴影

box-shadow:1px 2px 3px #ccc;

1px:水平位移

2px:竖直

border-image:边框图片

border-image: source slice width outset repeat;

border-image:url(border.png) 30 round;

用图片border.png 30出的地方 重复合理的重复

stretch:默认值。拉伸图像来填充区域

repeat:平铺(repeated)图像来填充区域

round:类似 repeat 值。如果无法完整平铺所有图像,则对图像进行缩放以适应区域。

border-image-source:于指定要用于绘制边框的图像的位置

border-image-slice:图像边界向内偏移

border-image-width:图像边界的宽度

border-image-outset:用于指定在边框外部绘制 border-image-area 的量

border-image-repeat:这个例子演示了如何创建一个border-image 属性的按钮

CSS3 背景

background-size:设置背景图标大小

background-size:80px 60px; //原图缩小为:80x60的

background-size:100% 100%;

background-Origin属性指定了背景图像的位置区域。当背景过大,或者属性为 repeat 区别可能不大

border-box:边框

padding-box:

content-box

CSS3 渐变(Gradients)

linear-gradient//线性渐变(向下/向上/向左/向右/对角方向) linear-gradient

radial-gradient//径向渐变(由它们的中心定义) radial

background: linear-gradient(direction, color-stop1, color-stop2, ...);

默认情况从上到下

background:-moz-linear-gradient(right,red,blue);/* Firefox 3.6 - 15 */

-o-liner-gradient()///* Opera 11.1 - 12.0 */

-webkit-linear-gradient()///* Safari 5.1 - 6.0 */

background:linear-gradient(to bottom right, red , blue);左上角到右下角

background:linear-gradient(to right, red, blue);//(标准语法必须在最后)标志有to 否则加前缀

使用角度

background:linear-gradient(60deg,red,blue,green)

重复的线性渐变

background: repeating-linear-gradient(red, yellow 10%, green 20%);

透明渐变

background: repeating-linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

CSS3 径向渐变

background: radial-gradient(center, shape size, start-color, ..., last-color);

center:位置 50% 50%表是居中,默认居中

shape size:从小到大()closest-side farthest-side closest-corner farthest-corner

background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

当能设置形状的时候,就不能与设置位置 大小一起shiyo9ng

background: radial-gradient(circle, red, yellow, green);

//circle:圆形 默认:ellipse 椭圆

重复的径向渐变

background: -moz-repeating-radial-gradient(red,yellow 10%,green 15%)

background: repeating-radial-gradient(red, yellow 10%, green 15%);

颜色:rgba(R,G,B,A); A 表示透明度 0% - 100%

color:rgba(R,G,B,A)

CSS3 文本效果

text-shadow:属性适用于文本阴影

text-shadow:5px 5px 5px 类似于 box-shadow:

word-wrap属性允许长的内容可以自动换行

word-wrap: normal|break-word;

normal 只在允许的断字点换行(浏览器保持默认处理)。默认

break-word:在长单词或 URL 地址内部进行换行。

字体:

@font-face

{

font-family: myFirstFont;

src: url(sansation_light.woff);//需要下载字体

}

div{

font-family:myFirstFont;

}

@font-face{

font-family:myfont;

src:url();

}

.pyt{

font-family:myfont;

}

CSS3 2D 转换(Internet Explorer 10, Firefox, 和 Opera支持transform 属性.)

transform

div{

transform:translate()/rorate()/scale()/skew()/matrix()

}

translate()方法:根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动

transform:translate(50px,100px);

-ms-transform:translate(50px,100px);/* IE 9 */

-webkeit-transform: /* Safari and Chrome */

rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

translate:rotate(30deg);顺时针转动30度

scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:

translate:scale(2,4)//横向变大2倍,纵向变大4倍

skew()方法,该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度:(会有扭曲的效果)

translate:skew(30deg,50deg);

matrix()方法和2D变换方法合并成一个。(等待研究)

matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

transform:matrix(a,b,c,d,e,f);

transform:matrix(0.586,0.8,-0.8,0.586,40,30);

a:0<a<1 如 0.586,0.686,0.786

b:0<b<1 如:0.5

c:-1<c<1 如:-0.5 旋转

d:0<d<1 倾斜

e:x轴的距离 left

f:y轴的距离相对于 top:

box-sizing:border-box;

方框大小调整(Box Sizing)

box-sizing:border-box; 定义border 的宽度不例外添加;

outline:外边框

outline-offset: 外边框的距离

outline:2px solid red;

outline-offset:15px;

过度:transition 过渡是元素从一种样式逐渐改变为另一种的效果。

transition:property duration function delay

property:css的属性

duration:定义花费时间 默认:0

function:亿什么方式实现  默认 ease

单独拿出来:

transition-timing-function:

linear:规定以相同速度开始至结束的过渡效果 cubic-bezier(0,0,1,1)

ease:规定慢速开始,然后变快,然后慢速结束的过渡效果 cubic-bezier(0.25,0.1,0.25,1)

ease-in:规定以慢速开始的过渡效果 cubic-bezier(0.42,0,1,1)

ease-out:规定以慢速结束的过渡效果 cubic-bezier(0.42,0,0.58,1)

ease-in-out:规定以慢速开始和结束的过渡效果

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

cubic-bezie(n,n,n,n)特殊研究一下

delay:延迟多少执行

transition-delay:2s;

-webket-transition-delay:2s;

例如:transition:width 2s ease 1;

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */

transition: width 2s, height 2s, transform 2s;

}

div:hover {

width: 200px;

height: 200px;

-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */

transform: rotate(180deg);

}

div发生hover事件的时候,

width:100px - 200px 需要2s中的变化

transform的反转180度也需要2s中过度

动画:@keyframes animation 通过from to 或者 50% 百分比

animation-name 属性为 @keyframes 动画指定名称。

animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function:类似过度 transition-timing-function

linear:规定以相同速度开始至结束的过渡效果 cubic-bezier(0,0,1,1)

ease:规定慢速开始,然后变快,然后慢速结束的过渡效果 cubic-bezier(0.25,0.1,0.25,1)

ease-in:规定以慢速开始的过渡效果 cubic-bezier(0.42,0,1,1)

ease-out:规定以慢速结束的过渡效果 cubic-bezier(0.42,0,0.58,1)

ease-in-out:规定以慢速开始和结束的过渡效果

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

cubic-bezie(n,n,n,n)特殊研究一下

animation-delay:规定动画什么时候开始 默认为:0

animation-iteration-count:动画执行的次数 默认为1/infinite 标识无限循环执行

animation-direction:是否循环交替反向播放动画

normal 默认 正常执行动画

reverse 动画反向播放

alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。

alternate-reverse  动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。

initial:设置该属性为它的默认值

inherit:从父元素继承该属性

animation-play-state: running(运行)/paused(暂停); 通过调整这个属性控制动画暂停

{background:blue;}

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s; //通过调用myfirst

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst{

from {background:red;}

to {background:blue;}

}

@keyframes myfirst{

0%   {background:red;}

25%  {background:yellow;}

50%  {background:blue;}

100% {background:green;}

}

@-moz-keyframes myfirst

@-o-keyframes myfirst

@-webkit-keyframes myfirst  /* Safari and Chrome */

CSS3学习基本记录的更多相关文章

  1. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  2. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  3. Activiti 学习笔记记录(2016-8-31)

    上一篇:Activiti 学习笔记记录(二) 导读:上一篇学习了bpmn 画图的常用图形标记.那如何用它们组成一个可用文件呢? 我们知道 bpmn 其实是一个xml 文件

  4. Activiti 学习笔记记录(二)

    上一篇:Activiti 学习笔记记录 导读:对于工作流引擎的使用,我们都知道,需要一个业务事件,比如请假,它会去走一个流程(提交申请->领导审批---(批,不批)---->结束),Act ...

  5. PostgresSQL 学习资料记录处

    PostgresSQL 学习资料记录处  博客:http://francs3.blog.163.com PostgreSQL9.4 中文手册:http://www.postgres.cn/docs/9 ...

  6. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  7. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

  8. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  9. Lucene.net(4.8.0) 学习问题记录五: JIEba分词和Lucene的结合,以及对分词器的思考

    前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...

随机推荐

  1. MySQL 主从复制与读写分离概念及架构分析

    1.MySQL主从复制入门 首先,我们看一个图: 影响MySQL-A数据库的操作,在数据库执行后,都会写入本地的日志系统A中. 假设,实时的将变化了的日志系统中的数据库事件操作,在MYSQL-A的33 ...

  2. Spark MLlib - LFW

    val path = "/usr/data/lfw-a/*" val rdd = sc.wholeTextFiles(path) val first = rdd.first pri ...

  3. Google C++命名规范

    时间:2014.03.02 地点:基地 -------------------------------------------------------------------------------- ...

  4. Stream与byte[]与Image与string

    public byte[] GetByteImage(Image img) { byte[] bt = null; if (!img.Equals(null)) { using (MemoryStre ...

  5. jQuery 自定义插件 (分页控件)

    1.引入jqpage.js 2.html代码 <div id="page"> </div> 3.js 调用 $(function () { $.fn.jqp ...

  6. openssl用法详解

    OpenSSL 是一个开源项目,其组成主要包括一下三个组件: openssl:多用途的命令行工具 libcrypto:加密算法库 libssl:加密模块应用库,实现了ssl及tls openssl可以 ...

  7. jQuery实现动态分割

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

  8. 3d图片切换(css3帧动画)

    效果带抖动翻转隐藏,使用帧动画 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  9. [基础] Array.prototype.indexOf()查询方式

    背景 最近在看Redux源码,createStore用于注册一个全局store,其内部维护一个Listeren数组,存放state变化时所有的响应函数. 其中store.subscribe(liste ...

  10. com.panie 项目开发随笔_功能任务设计(2016.12.28)

    (一) 第一个菜单 做什么好呢? 1)上次 在研究的功能 是 爬虫,需要将定时爬虫的任务加进来 2)博客的页面,也需要重新布局出来 3)需要做一个,添加博客的页面 (二) 那就先做博客管理吧! 先添加 ...