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和 ...
随机推荐
- MVC模式简介
MVC模式是一种表现模式,它将web应用程序分成三个主要部分即:模型(Model)视图(View)控制器(Controller)M:Model主要是存储或者是处理数据的模型,包含了用户使用的数据,业务 ...
- CSS“反转”为LESS
LESS(官网在此:http://lesscss.net/)的魅力相信大家都已明了,个人认为它最大的魅力在于能够清晰的展现嵌套关系. 针对现有的项目,它的应用难点主要在于—— 何时转换为css,即是否 ...
- Android实现高仿QQ附近的人搜索展示
本文主要实现了高仿QQ附近的人搜索展示,用到了自定义控件的方法 最终效果如下 1.下面展示列表我们可以使用ViewPager来实现(当然如果你不觉得麻烦,你也可以用HorizontalScrollVi ...
- mysqlroot passwd
grant all on *.* to 'root'@'192.168.0.%' identified by 'bloablabar'; 更改用户密码: update user set passwor ...
- Javascript模块化编程之路——(require.js)
转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...
- .NET委托解析
委托这个概念其实我们都很熟悉了,但是在使用的时候很多人还是无法去把控它,我们可以试想一下,在平时编码的时候,你是直接按照业务逻辑直接创建类,new出一个对象来进行操作的还是说有用到委托来更高效的完成一 ...
- ASP.NET Web.Config 读写辅助类
using System; using System.Configuration; using System.Web; using System.Web.Configuration; namespac ...
- JAVA 获取web文件的相对路径
转自:http://wwwdd2315.blog.163.com/blog/static/66661889201091953350298/ 在JAVA文件中获取该项目的相对路径1.基本概念的理解 绝对 ...
- Digital Image Processing 学习笔记2
第二章 2.1视觉感知要素 2.1.1 人眼的结构 眼睛由角膜与巩膜外壳.脉络膜和视网膜包围,晶状体由通信的纤维细胞层组成,并由附在睫状体上的纤维悬挂:视网膜上分布两类光感受器(锥状体和杆状体),他们 ...
- ntpd时间同步 安装与配置
1,安装 yum -y install ntp vim /etc/ntp.conf 默认配置: driftfile /var/lib/ntp/drift restrict default kod no ...