CSS之千变万化的Div
厂址：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的更多相关文章
- [转]CSS网页布局：div水平居中的各种方法
http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...
- CSS实现图片在div a标签中水平垂直居中
CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...
- HTML+CSS D07 边框、div
1.边框(border) 常用表达 border-width px thin 定义细的边框. medium 默认.定义中等的边框. thick 定义粗的边框. length 允许您自定义边框的宽度. ...
- 解决css的float父div没有高度
在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计 <div class='box'> <div class='float_left'></d ...
- 文字添加响应事件，js动态加载CSS, js弹出DIV
文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- CSS3变形记(上)：千变万化的Div
传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...
- css：子元素div 上下左右居中方法总结
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...
- css后代选择器（div.class中间不带空格）
如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）
原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...
随机推荐
- [IIS]由安装IIS和.net framework先后顺序引发的问题，你中招了吗？
引言 最近帮别人做了一个小网站,在本机部署测试的时候,竟然浏览不了aspx后缀的页面,但可以浏览html页面,由此想到了IIS对静态页和动态页不同的处理方式. http请求到达服务器 当服务器接收到一 ...
- [Android Pro] android root权限破解分析
许 多机友新购来的Android机器没有破解过Root权限,无法使用一些需要高权限的软件,以及进行一些高权限的操作,其实破解手机Root权限是比较简 单及安全的,破解Root权限的原理就是在手机的/s ...
- C语言宏定义和宏定义函数
要写好C语言,漂亮的宏定义是非常重要的.宏定义可以帮助我们防止出错,提高代码的可移植性和可读性等. 在软件开发过程中,经常有一些常用或者通用的功能或者代码段,这些功能既可以写成函数,也可以封装成为宏定 ...
- （剑指Offer）面试题38：数字在排序数组中出现的次数
题目: 统计一个数字在排序数组中出现的次数. 思路: 1.顺序遍历 顺序扫描一遍数组,统计该数字出现的次数. 时间复杂度:O(n) 2.二分查找 假设我们需要找的数字是k,那么就需要找到数组中的第一个 ...
- 使用CSS3实现的player播放按钮
完成的效果如下 查看效果并下载 Step 1:先了解border的原理: Step 2:HTML代码结构 <section class="playContainer"> ...
- vue-router路由元信息详解
一.官方文档 路由元信息:定义路由的时候可以配置 meta 字段 const router = new VueRouter({ routes: [ { path: '/foo', component: ...
- Cognos TM1_10.1.1服务端安装
出于对bi行业的强大热爱,出于对cognos tm1的强大兴趣,于是就想研究一下Cognos TM1(table manager one),今天就分享一下自己微不足道研究成果,真可谓是tm1的九牛一毛 ...
- nmon 命令（转）
转载:https://www.cnblogs.com/kongzhongqijing/articles/4057487.html 一.基本使用 nmon目前可支持AIX和LINUX,可到以下地址去免费 ...
- linux中的硬链接和软链接是什么
Linux 文件系统最重要的特点之一是它的文件链接.链接是对文件的引用,这样您可以让文件在文件系统中多处被看到.不过,在 Linux 中,链接可以如同原始文件一样来对待.链接可以与普通的文件一样被执行 ...
- eclipse中android开发怎么修改xml文件字体大小
windows->preference->General->appearence->Colors and Font->Basic->Text Font.点击右侧的E ...