Css3 - 全面学习

css3实验、生成、学习网站

http://www.css3maker.com/

http://www.css3.me/

查询前缀和兼容性

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和 ...

随机推荐

canvas API ，通俗的canvas基础知识（六）
这篇是canvas API系列的首尾之作,这篇以后,所有的canvas的属性和方法就将完了,哦,不对,应该是大部分常用的,还有部分不常用的属性和方法,因为种种原因,就不介绍了,后期的重点就是多写一点c ...
mysql如何利用Navicat 导出和导入数据库
MySql是我们经常用到的数据,无论是开发人员用来练习,还是小型私服游戏服务器,或者是个人软件使用,都十分方便.对于做一些个人辅助软件, 选择mysql数据库是个明智的选择,有一个好的工具更是事半功倍 ...
excel数据导入SQLite数据库
参考:http://blog.baisi.net/?110653/viewspace-6725 1.excel表中最上面一行的字段名留着,留着以后导入的时候对应. 2.保存成csv格式,在选择文件类型 ...
css3学习总结5--CSS3文本效果
CSS3 文本效果 1. text-shadow 2. word-wrap text-shadow属性使用方法 text-shadow属性使用方法如下所示. text-shadow:length le ...
解决Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apache/maven/cli/MavenCli : Unsupported major.minor version 51.0
jdk问题解决方案: 更换IDE的jdk
mysql中的sql总结
>>>>>增加字段 ALTER TABLE pj_account ADD COLUMN test INT(11) NOT NULL DEFAULT 1 COMME ...
了解 hadoop
<Hadoop基础教程>之初识Hadoop 博客分类: 读后感 Hadoop一直是我想学习的技术,正巧最近项目组要做电子商城,我就开始研究Hadoop,虽然最后鉴定Hadoop不适用我 ...
蓝桥杯算法训练区间k大数查询（水题）
算法训练区间k大数查询时间限制:1.0s 内存限制:256.0MB 问题描述给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式第一行包含一个数n,表示序列长度. ...
js 完全分离 window.onload=
js 完全分离 window.onload= <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
在Windows中使用MinGW编译X264
转自:http://www.cnblogs.com/xiongjiaji/archive/2012/06/08/2541265.html 参考:http://ayobamiadewole.com/Bl ...

Css3 - 全面学习

Css3 - 全面学习的更多相关文章

随机推荐

热门专题