Css3 - 全面学习
css3实验、生成、学习网站
查询前缀和兼容性
http://caniuse.com/
1、文本阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css3 - 文本效果</title>
<style>
body
{
font-size:50px;
text-shadow: 5px 5px 1px rgba(0,0,0,.7);
}
</style>
</head>
<body>
Hello World!
</body>
</html>
2、文本溢出
http://www.cnblogs.com/CyLee/p/5333518.html
3、生成渐变的背景图片.必须加上厂商前缀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css3 - 渐变效果</title>
<style>
div
{
width: 500px;
height: 200px;
color:#fff;
/*background-image: linear-gradient(to left top ,yellow,black);*/
/*background-image: linear-gradient(45deg,yellow,black);*/
/*background-image: linear-gradient(-45deg,yellow,black);*/
/*background-image: repeating-linear-gradient(rgba(0,0,0,1) 10px,rgba(255,255,255,1) 30px);*/
background-image: linear-gradient(-45deg ,yellow 0%,black,blue,rgba(255,255,255,1) 100%);
}
</style>
</head>
<body>
<div>黑色从左上到右下渐变,可以设置top,right,bottom,left。还可以设置0~360deg（度）.还可以书写N个颜色，颜色可以分配占比重（%或者Px）、默认从开头为0%、结尾100%，中间如果不设置会自动计算。
并且这些颜色还可以使用rgba来实现强大的层次感。还可以使用repeating实现重复背景类似百叶窗的效果
</div>
</body>
</html>
4、变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css3 - 渐变效果</title>
<style>
div
{
width: 500px; height: 200px; color:#fff; background: green;
/*transform:translate(100px,200px);*/
/*transform:scale(1.5,0.5);*/
/*transform:rotate(4deg);*/
/*transform:skew(4deg,10deg);*/
transform:translate(200px,100px) rotate(4deg) scale(1.5) skew(4deg,4deg);
}
</style>
</head>
<body>
<div>
transform对应几个函数：
1、translate（x,y） 平移
2、scale（x,y） 对x轴和y轴进行倍数扩大或者缩小
3、rotate(deg) 以中心为轴旋转n角度，比较常用的效果
5、skew(xdeg,ydeg) 倾斜，有点立体感，类似投影仪
以上功能都可以通过空一格组合使用，如
</div>
</body>
</html>
5、基准点（对上面transform的扩展）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css3 - 渐变效果</title>
<style>
div
{
width: 200px; height: 200px; color:#fff; background: green;
transform: translate(150px,100px) rotate(45deg);
transform-origin: 0px 0px;
/*transform-origin: left top;*/
}
</style>
</head>
<body>
<div>
transform-origin
可以设置transform的基准点，可以设置px,%,还有位置
</div>
</body>
</html>
Css3 - 全面学习的更多相关文章
- HTMl5/CSS3/Javascript 学习推荐资源
HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...
- css3 3d学习心得
css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...
- HTML5移动开发学习笔记之CSS3基础学习
CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...
- 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局
前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...
- 【HTML5&CSS3进阶学习01】气泡组件的实现
前言 气泡组件在实际工作中非常普遍,无论是网页中还是app中,比如: 我们这里所谓气泡组件是指列表型气泡组件,这里就其dom实现,css实现,js实现做一个讨论,最后对一些细节点做一些说明,希望对各位 ...
- css3的学习
已经学习css3一个月了,通过对css3的深入学习,我对网页设计的理解就更深刻了,以前只会用简单的图片,定位等来制作网页,现在可以运用css3扩展的新内容来写出更好看的网页. css3扩展内容中,我认 ...
- css3动画学习笔记
具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...
- css3动画学习资料整理
现在主流浏览器(先不管IE8,IE9吧),尤其是移动端浏览器基本都支持css3了,为了增强页面的表现力,css3动画必不可少了.这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料,并附上两个 ...
- CSS3——transform学习
CSS动画效果可以使用transform和Animation,前者较简单,先学习前者. transform有几个基本变换,平移.旋转.缩放.扭曲 一.translate平移 有translate2d和 ...
随机推荐
- linux 多个文件中查找字符串
2015年2月9日 14:36:38 # find <directory> -type f -name "*.c" | xargs grep "<str ...
- sqlserver的执行计划
一:执行计划生成过程 说到执行计划,首先要知道的是执行计划大概生成的过程,这样就可以做到就心中有数了,下面我画下简图: 1. 分析过程 这三个比较容易理解,首先我们要保证sql的语法不能错误,sele ...
- Java for LeetCode 060 Permutation Sequence
The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of the p ...
- codeforces A. Cinema Line 解题报告
题目链接:http://codeforces.com/problemset/problem/349/A 题目意思:题目不难理解,从一开始什么钱都没有的情况下,要向每一个人售票,每张票价格是25卢布,这 ...
- java单例,懒汉&饿汉
* 单例模式Singleton * 应用场合:有些对象只需要一个就足够了,如皇帝 * 作用: 保证整个应用程序中某个实例有且只有一个 * 区别: 饿汉模式的特点是加载类时比较慢,但运行是比较快 ...
- 配置无线网络的时候会提示“Enter Password for Default Keyring to Unlock”
密钥管理软件Seahorse有关,这个时候我们打开c配置一下就可以解决. 命令行下运行seahorse或依次点击菜单“应用程序→附件→密码和加密密钥”, 在login一行中右键选择更改密码,然后什么都 ...
- l中断的实现
转自:http://blog.chinaunix.net/uid-25014876-id-90740.html xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- 烟大 Contest1025 - 《挑战编程》第二章：数据结构 Problem A: Jolly Jumpers（水题）
Problem A: Jolly Jumpers Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 10 Solved: 4[Submit][Status] ...
- 烟大 Contest1024 - 《挑战编程》第一章：入门 Problem G: Check The Check（模拟国际象棋）
Problem G: Check The Check Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 10 Solved: 3[Submit][Statu ...
- hdu 4296 贪心
证明转自: here 题意:有 n 个地板,每个地板 i 有两个权值 Wi, Si,且 PDV(i) = (ΣWj) - Si ( j 表示在 i 上面的地板).问如何调整顺序,使得[max(PD ...