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有背景颜色或者边框,而不设置其高度, ...
随机推荐
- PHP语言的优势？
稳定性: 毫无疑问,PHP已经是目前互联网服务端使用最广泛的编程语言之一,目前PHP在互联网应用领域的占有率位居全球第一.试问,如果本身不够成熟和稳定,如何能占有如此大的市场呢? 易用性: 简单实用, ...
- 【mybatis】mybatis访问报错：org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 或者 feign被调用方使用的mybatis总报空指针异常java.lang.NullPointerException，而变量都没有问题的情况
mybatis访问报错:org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 需要检查的步骤: ...
- ipad2 wifi ios7.x 1.0.1还是无法越狱
原话: Warning! We have reports that the iPad 2 (wifi) is not yet compatible with the jailbreak and wil ...
- input输入框回车事件响应
1.常用方法 1.方法1$('#applyCertNum').bind('keypress',function(event){ if(event.keyCode == 13) { alert('你输入 ...
- wamp网站Forbidden You don't have permission to access
Forbidden You don't have permission to access 问题原因:apache的2.4的版本中 Require all denied 应该变成Require a ...
- VB开发ActiveX控件的一些记录
注意,下面很多语句的用法,不能放在Private Sub UserControl_Initialize()里使用,要放在Private Sub UserControl_InitProperties() ...
- 数学图形(2.12)spherical cycloid球面外摆曲线
查了半天也没搜到其具体的定义,先把脚本代码和截图发下. #http://www.mathcurve.com/courbes3d/cycloidspheric/cycloidspheric.shtml ...
- Download Visual Studio
Welcome to a new way to install Visual Studio! In our newest version, we've made it easier for you t ...
- [Transducer] Make Transducer works for Iteratable collection and Object
We've seen how we can transduce from arrays or other iterables, but plain objects aren't iterable in ...
- 国内站点经常使用的一些 CDN 静态资源公共库加速服务
web开发人员们的福利来了..旨在为大家提供更快很多其它更好的静态资源库的CDN载入库方案! CDN公共库是指将经常使用的JS库存放在CDN节点,以方便广大开发人员直接调用. 与将JS库存放在serv ...