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 - 全面学习的更多相关文章

  1. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

  2. css3 3d学习心得

    css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...

  3. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

  4. 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局

    前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...

  5. 【HTML5&CSS3进阶学习01】气泡组件的实现

    前言 气泡组件在实际工作中非常普遍,无论是网页中还是app中,比如: 我们这里所谓气泡组件是指列表型气泡组件,这里就其dom实现,css实现,js实现做一个讨论,最后对一些细节点做一些说明,希望对各位 ...

  6. css3的学习

    已经学习css3一个月了,通过对css3的深入学习,我对网页设计的理解就更深刻了,以前只会用简单的图片,定位等来制作网页,现在可以运用css3扩展的新内容来写出更好看的网页. css3扩展内容中,我认 ...

  7. css3动画学习笔记

    具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...

  8. css3动画学习资料整理

    现在主流浏览器(先不管IE8,IE9吧),尤其是移动端浏览器基本都支持css3了,为了增强页面的表现力,css3动画必不可少了.这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料,并附上两个 ...

  9. CSS3——transform学习

    CSS动画效果可以使用transform和Animation,前者较简单,先学习前者. transform有几个基本变换,平移.旋转.缩放.扭曲 一.translate平移 有translate2d和 ...

随机推荐

  1. mysql导入和导出数据

    Linux下如何单个库进行导入和备份操作 1.将数据导入数据库mysql -u账号 -p密码 数据库<sql脚本 mysql -uroot -proot test</home/upload ...

  2. iOS 中使用Base64编码方式编码图片数据

    最近一个项目要求对图片数据简单加密下,就是那种不能直接看到图片内容就行.于是我使用了base64编码对图片数据进行编码,把图片2进制数据变成了base64的字符串,再把这个字符串保存到server的数 ...

  3. BestCoder17 1002.Select(hdu 5101) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5101 题目意思:给出 n 个 classes 和 Dudu 的 IQ(为k),每个classes 都有 ...

  4. NEFU 1142 表哥的面包

    表哥的面包 Problem:1142 Time Limit:1000ms Memory Limit:65535K Description 可爱的表哥遇到了一个问题,有一个长为N(1≤N≤10^18)的 ...

  5. 转：JavaScript事件冒泡简介及应用

    (本文转载自别处) JavaScript事件冒泡简介及应用   一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...

  6. Maven类包冲突终极解决方案

    本文转自:http://ian.wang/106.htm 举例A依赖于B及C,而B又依赖于X.Y,而C依赖于X.M,则A除引B及C的依赖包下,还会引入X,Y,M的依赖包(一般情况下了,Maven可通过 ...

  7. Linux系统如何查看CPU型号等

    有时候在下载jdk或其它用图的时候,可能需要查看一下这个cpu的型号 [root@subvm ~]# less /proc/cpuinfo |grep modelmodel           : 4 ...

  8. JUC回顾之-ScheduledThreadPoolExecutor底层实现原理和应用

    项目中经常使用定时器,比如每隔一段时间清理下线过期的F码,或者应用timer定期查询MQ在数据库的配置,根据不同version实现配置的实时更新等等.但是timer是存在一些缺陷的,因为Timer在执 ...

  9. 企业级项目中最常用到的SQL

    用SQL语句添加删除修改字段 1.增加字段     alter table docdsp    add dspcode char(200) 例如: 表gwamis.d410Sctzmx添加字段f410 ...

  10. Hibernate 分页时 Long 无法转化成Integer类型 异常

    转自:http://loquat.iteye.com/blog/818547 报错:java.lang.Long cannot be cast to java.lang.Integer   Long ...