CSS3学习基本记录
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学习基本记录的更多相关文章
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- HTML5 CSS3学习
HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍: http://www.html5cn.com.cn/news/gdt/2 ...
- Activiti 学习笔记记录(2016-8-31)
上一篇:Activiti 学习笔记记录(二) 导读:上一篇学习了bpmn 画图的常用图形标记.那如何用它们组成一个可用文件呢? 我们知道 bpmn 其实是一个xml 文件
- Activiti 学习笔记记录(二)
上一篇:Activiti 学习笔记记录 导读:对于工作流引擎的使用,我们都知道,需要一个业务事件,比如请假,它会去走一个流程(提交申请->领导审批---(批,不批)---->结束),Act ...
- PostgresSQL 学习资料记录处
PostgresSQL 学习资料记录处 博客:http://francs3.blog.163.com PostgreSQL9.4 中文手册:http://www.postgres.cn/docs/9 ...
- CSS3学习之圆角box-shadow,阴影border-radius
最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css expression有争议的地方,对png24图片的处理也是用滤镜,类似( ...
- css和css3学习
css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- Lucene.net(4.8.0) 学习问题记录五: JIEba分词和Lucene的结合,以及对分词器的思考
前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...
随机推荐
- BZOJ 3944 Sum
题目链接:Sum 嗯--不要在意--我发这篇博客只是为了保存一下杜教筛的板子的-- 你说你不会杜教筛?有一篇博客写的很好,看完应该就会了-- 这道题就是杜教筛板子题,也没什么好讲的-- 下面贴代码(不 ...
- [LeetCode] Number of Boomerangs 回旋镖的数量
Given n points in the plane that are all pairwise distinct, a "boomerang" is a tuple of po ...
- [Java]使用HttpClient实现一个简单爬虫,抓取煎蛋妹子图
第一篇文章,就从一个简单爬虫开始吧. 这只虫子的功能很简单,抓取到”煎蛋网xxoo”网页(http://jandan.net/ooxx/page-1537),解析出其中的妹子图,保存至本地. 先放结果 ...
- Gone Fishing POJ 1042
#include<cstdio> #include<iostream> #include<algorithm> #include<cstring> us ...
- table里面,怎么根据checkbox选择的一行中的某个单元格的值是否为空,来判断是否该选中
<table class="stripe" id="tab2"> <tr> <th>选择</th> <th ...
- HTML 全局属性
http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
- [UWP] 使用SemanticZoom控件
在写一个看新闻软件的时候,用到了SemanticZoom控件,遇到了一些问题,比如如何根据首字母分类,以及放大视图中有数据的和没数据的通过背景色或前景色区分,幸运的是,all solved. 先来个效 ...
- 企业站SEO记录
半个多月前给接了一个企业站,赚点小钱,客户也没什么要求,所以就找了模板修改了一下就上线了,然后又做了微信网站.搭了微信公众号,也都没什么技术含量,最伤脑筋的就是做关键词排名了,虽然做的几个词竞争也不是 ...
- python常用模块(模块和包的解释,time模块,sys模块,random模块,os模块,json和pickle序列化模块)
1.1模块 什么是模块: 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文 ...
- Mysql支持的数据类型(总结)
一.数值类型 Mysql支持所有标准SQL中的数值类型,其中包括严格数据类型(INTEGER,SMALLINT,DECIMAL,NUMBERIC),以及近似数值数据类型(FLOAT,REAL,DOUB ...