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. Android 中的openurl

    在iOS中这么叫,在android中不知道是不是这么称呼. 转发一篇文章 http://www.cnblogs.com/zhangkai5157/p/3289532.html

  2. cmd的rd命令简单解析

    我们知道在Windows下cmd命令行中"rd 文件夹名称"可以删除空目录,"del 文件名"可以删除文件,那么怎么删除一个非空文件夹呢,命令如下: 比如删除文 ...

  3. Greedy:Stall Reservations(POJ 3190)

    牛挤奶 题目大意:一群牛很挑剔,他们仅在一个时间段内挤奶,而且只能在一个棚里面挤,不能与其他牛共享地方,现在给你一群牛,问你如果要全部牛都挤奶,至少需要多少牛棚? 这一题如果把时间区间去掉,那就变成装 ...

  4. Eclipse设置C++自动补全变量名快捷键Alt + /

    使用快捷键:Alt+/ 要是还是有些场合不能提示,按照下列步骤 Window-Preferences-c/c++-Editor-Content Assist-Advanced 将未勾选的全部勾选

  5. Diablo3

    1.装备 主手:元素弓 副手:精细箭袋 头: 胸:燃火外套 手:娜塔亚的手感 护腕:稳击护腕 戒指:罗盘玫瑰+布尔凯索的婚戒 颈部:旅者之誓 腰:科雷姆的强力腰带(速度加25%) 腿:深渊挖掘裤 脚: ...

  6. 2.简单工厂模式(Simple Factory)

    using System; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { //如果 ...

  7. 在有EditText控件的AlertDialog对话框中自动弹出输入法

    我们先回顾一下创建AlertDialog的一般步骤. 一 inflate AlertDialog的布局文件   例如,其中dlg就是我们的布局文件.    View layout = LayoutIn ...

  8. C++ 中 volatile 的使用

    一.作用 volatile的作用是: 作为指令关键字,确保本条指令不会因编译器的优化而省略,且要求每次直接读值. 简单地说就是防止编译器对代码进行优化.比如如下程序:XBYTE[2]=0x55;XBY ...

  9. 蓝牙4.0——Android BLE开发官方文档翻译

    ble4.0开发整理资料_百度文库 http://wenku.baidu.com/link?url=ZYix8_obOT37JUQyFv-t9Y0Sv7SPCIfmc5QwjW-aifxA8WJ4iW ...

  10. 2016.6.13 php与MySQL数据库交互之数据库中的商品信息展示

    <table width="550" border="2" align="center" cellpadding="0&qu ...