厂址：http://www.cnblogs.com/yunfeifei/p/4671930.html

一、div和css3在一起

.box1 {

        width: 100px;

        height: 100px;

        border: 20px solid #;

        border-left-color:red;

        border-right-color:yellow;

        border-bottom-color:blue;

        border-top-color:green;

    }

效果：

.content {

        margin:200px;

        width: 100px;

        height: 100px;

        border: 20px solid #;

        border-left-color:red;

        border-right-color:yellow;

        border-bottom-color:blue;

        border-top-color:green;

        border-radius:%;

    }

效果：

.content {

        margin:200px;

        width: 100px;

        height: 100px;

        border: 20px solid #;

        border-left-color:transparent;

        border-right-color:yellow;

        border-bottom-color:blue;

        border-top-color:green;

        border-radius:%;

    }

效果：

.content {

        margin:200px;

        width: 0px;

        height: 0px;

        border: 100px solid #;

        border-left-color:red;

        border-right-color:yellow;

        border-bottom-color:blue;

        border-top-color:green;

    }

效果：

    .content {

        margin:200px;

        width: 0px;

        height: 0px;

        border: 100px solid #;

        border-left-color:red;

        border-right-color:yellow;

        border-bottom-color:blue;

        border-top-color:green;

        border-radius:%;

    }

效果：

二、div + css3图形进阶

.content {

        margin:200px;

        width: 0px;

        height: 0px;

        border: 100px solid #;

        border-left-color:red;

        border-right-color:yellow;

        border-bottom-color:blue;

        border-top-color:green;

        border-radius:%   ;

    }

效果：

.content {

        margin:200px;

        width: 200px;

        height: 0px;

        border: 100px solid #;

        border-left-color:red;

        border-right-color:yellow;

        border-bottom-color:blue;

        border-top-color:green;

        border-radius:%;

    }

效果：

.content {

        margin:200px;

        width: 300px;

        height: 100px;

        border: 100px solid #;

        border-left-width:;

        border-left-color:red;

        border-right-color:yellow;

        border-bottom-color:blue;

        border-top-color:green;

        border-radius:%;

    }

效果：

.content {

        margin:200px;

        width: 300px;

        height: 100px;

        border: 6px solid #;

        border-left-width:150px;

        border-radius:%;

    }

效果：

三、css3的2D变形

<style>

    .content {

        position:absolute;

        margin:200px;

        width: 300px;

        height: 100px;

        border: 6px solid #;

        border-left-width:150px;

        border-radius:%;

        font-weight:bold;

        text-align:center;

        font-size:36px;

        line-height:80px;

    }

    .content:nth-child(){

        transform:rotate(0deg);

    }

    .content:nth-child(){

        transform:rotate(65deg);

    }

    .content:nth-child(){

        transform:rotate(130deg);

    }

</style>

<body>

    <div class="content">One</div>

    <div class="content">Two</div>

    <div class="content">Three</div>

</body>

效果：

我们可以通过transform-origin来改变旋转的原点，后面可以又两个值，是left,top,right,bottom中的一个,如果只给了一个值，如top,则会以顶边的中心进行旋转，如下是以右边的中心transform-origin：right;旋转得到的图形：

下面，关于形变的还有一个比较重要的属性就是skew,他就是对div做平行转换，如：我们对X方向做转换，效果如下：

<style>

    .content {

        position:absolute;

        margin:500px;

        width: 300px;

        height: 100px;

        border: 6px solid #;

        font-weight:bold;

        text-align:center;

        font-size:36px;

        line-height:80px;

        transform-origin:right;

    }

    .content:nth-child(){

        transform:skew(30deg, 0deg);

    }

</style>

<body>

    <div class="content">One</div>

</body>

效果：

四、总结

通过对div的border、border-radius、border-color、border-widht、width、height等属性进行设置，我们可以得到很多不同的图形，然后再加上对图像进行平移、放大、缩小、旋转等操作

CSS之千变万化的Div的更多相关文章

  1. [转]CSS网页布局：div水平居中的各种方法

    http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...

  2. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  3. HTML+CSS D07 边框、div

    1.边框(border) 常用表达 border-width px thin 定义细的边框. medium 默认.定义中等的边框. thick 定义粗的边框. length 允许您自定义边框的宽度. ...

  4. 解决css的float父div没有高度

    在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计 <div class='box'> <div class='float_left'></d ...

  5. 文字添加响应事件，js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  6. CSS3变形记(上)：千变万化的Div

    传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...

  7. css：子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  8. css后代选择器（div.class中间不带空格）

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  9. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

随机推荐

  1. IOS开关效果

    有IOS的开关模拟,当然也有MIUI的开关模拟 看到设置选项里面的开关样式,突发奇想地来试试    最终效果如图: <!DOCTYPE html> <html> <hea ...

  2. asp.net core更进内容

    ASP.NET Core 是对 ASP.NET 的一次意义重大的重构.本文介绍了 ASP.NET Core 中的一些新概念,并且解释了它们如何帮助你开发现代的 Web 应用程序. 章节: 什么是 AS ...

  3. Tui-x 基础使用

    本章以Tui-x3.x仓库里的HelloTuiCpp项目来做具体解说.[ 由于HelloTuiCpp里面演示的全部控件,本文篇幅有限,不能一一说明,所以仅仅能列举两个控件,后面的文章会有针对性地解说其 ...

  4. poj 1995 Raising Modulo Numbers 题解

    Raising Modulo Numbers Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 6347   Accepted: ...

  5. firefox篇

    QQ:1187362408 欢迎技术交流和学习 firefox篇(firefox): TODO: 一,firefox:使用总结例如以下: 运用filefox调试,  总结例如以下:  1.加入fire ...

  6. Delphi第三方组件安装DCU.PAS.DPK.BPL.ActiveX控件

    不是由BORLAND提供的组件叫第三方组件:安装方法:南山古桃(nsgtao)首先提醒一下:最好把要安装的文件先复制到Delphi安装目录的Lib目录下再执行下面的操作!就目前常见的各种形式的组件的安 ...

  7. KVM&amp;Libvirt基本概念及开发杂谈

    导读 大家好,本次肖力分享的主题是KVM&Libvirt基本概念及开发杂谈,内容有些凌乱松散,主要基于自己早期整理的笔记内容和实践感悟,有些内容难免有失偏颇,望见谅.前面先介绍下需要了解的基本 ...

  8. Windows Server 2012 R2如何编辑hosts文件

    在我的Windows Server 2012 R2系统里编辑hosts文件则会出现没有无法保存的问题,原因是权限不足 错误信息:" Unable to save C:\Windows\Sys ...

  9. Cognos备份与恢复方案

    场景:早上来上班,突然发现COGNOS服务器挂掉了,比如硬盘彻底坏掉了,不能恢复了,那该怎么办?前提是肯定要有备份啊. 备份内容: A:FM模型备份OKB:Cognos内容库备份OK 恢复过程: 1: ...

  10. win10 当前操作环境不支持支付宝控件 完美解决办法

    第一步,修改系统配置 在运行中输入“gpedit.msc”打开本地组策略编辑器: 打运行窗口的方法是:按win键+R (按下win键再按R键之后 同时松开)  win键 即windows 的微标键 如 ...