厂址: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. vsftpd FTP服务器配置

    步骤如下: 0. 进入目录/etc/vsftpd,将vsftpd.conf备份为vsftpd.conf.bak(否则启动时会启动这个)1. 进入目录/etc/vsftpd,创建文件myserver.c ...

  2. VC获得控制台HWND GetConsoleHwnd

    HWND GetConsoleHwnd(void) { #define MY_BUFSIZE 1024 // Buffer size for console window titles. HWND h ...

  3. 描述 Machine.Config 和 Web.Config(转载)

    NET Framework 提供的配置管理包括范围广泛的设置,允许管理员管理 Web 应用程序及其环境.这些设置存储在 XML 配置文件中,其中一些控制计算机范围的设置,另一些控制应用程序特定的配置. ...

  4. Flink及主流流框架spark,storm比较

    干货 | Flink及主流流框架比较 IT刊 百家号17-05-2220:16 引言 随着大数据时代的来临,大数据产品层出不穷.我们最近也对一款业内非常火的大数据产品 - Apache Flink做了 ...

  5. [转]MySQL Explain

    Mysql Explain 详解 一.语法 explain < table_name > 例如: explain select * from t3 where id=3952602; 二. ...

  6. drawable和values的加载规则

    Google搞了一大套hdpi.xhdpi之类的这些东西,简单说来,就是为了让我们轻松实现"与设备密度无关的视觉大小一致性",注意这里的"视觉大小一致性",就是 ...

  7. Minify压缩JS和CSS

    Minify把CSS和JS压缩和削减(Minify:去掉空格回车符等),以及把多个CSS,JS文件整合到一个文件里.不要以为你的大带宽没有必要进行这类优化.使用它的理由更重要的是文件合并,而不是压缩, ...

  8. MongoDB 聚合管道(aggregate)

    1.aggregate() 方法 我们先插入一些测试数据 { "_id" : ObjectId("5abc960c684781cda6d38027"), &qu ...

  9. iOS 真机调试多台mac电脑共用一个证书

    大致流程:在你的开发电脑上导出一个 p12文件,以及在 apple开发者中心下载一个profile文件,把这两个文件导出给你的mac开发友就行了 打开 mac  钥匙工具-----找到你的证书---- ...

  10. octopress github 换电脑 使用

    octopress github 换电脑 使用