本篇文章主要给大家介绍一下如何灵活的运用css3来创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前一些特殊的图形我们只能在Photoshop等图像编辑软件中制作，现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。

1）正方形以及长方形

正方形和长方形比较简单我们只需要设置一个div的宽度和高度既可;

问题重现

现在需要写一个选项卡，有2个选项可以切换。如是就写下了下面的代码：

 <div class="container">
 <div>选项卡一</div>
 <div>选项卡二</div>
 </div>
 .container {
 padding: 20px;
 }
 .container div{
 display: inline-block;
 width: 50%;
 text-align:center;
 padding: 6px;
 border: 1px solid #3b89ed;
 box-sizing: border-box;
 } 

本篇文章主要给大家介绍一下如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题。

1）单行文本的居中

主要实现css代码：

水平居中：text-align:center;

垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/

我们先来看这样一个例子，加入我们这里有一个div，宽度和高度为300px，背景颜色为黑色，然后在div中有

CSS3 用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

您将了解以下的用户界面属性：

• resize

• box-sizing

• outline-offset

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

负边距即margin属性的值设为负值，在CSS布局中时一个很有用的技巧。值为正的场景很常见，大家都很熟悉其表现

当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top、left后元素还占据原来位置不同

当margin-bottom、margin-right设为负值的时候，元素本身没有位置变化，后面的元素会下移、右移

看几个应用场景

简介：

对于一个DIV实现正六边形，相信作为面试题好多学伴们都不知如何去解。不必惊慌。没有听说过的同学也不要害怕。今天就来说一下。

效果：

步骤一：

原理：

它考察的是对于CSS3的理解，以及数学勾股定理。

对于一个div怎么实现一个六边形，CSS3中有before和after两个伪类。将DIV自身实体化即宽高设置，将before也进行实体化，而且将定位方式改变成为固定定位。向左向右各走自身宽度的一半。

<style>

*{ padding:0; margin:0;}

#box{ width:200px; height:200px; padding:30px; border:#000 solid 1px; margin:30px;s}

</style>

<div id="box" class="boxClass">

<p>1</p>

<p>2</p>

“小白，网页分析的怎么样了？”

“小有感触，我发现很多网站头部和底部容器都是通栏的，浏览器窗口多宽，他们就有多宽。这些好像是自动适应的，主体部分一般都是固定的宽度，并且是居中显示的！”

“不错，小白，看得很仔细，你之前也自己看了html的标签，那么你应该知道什么是“块”吧！”

“知道，块元素（容器）默认宽度跟它父容器的宽度一样，而且前后有换行符。如果不做特殊的样式控制，每个块容器两边都不会有其他的块容器，假如我在html的body里面写三个div层，他们肯定是上下排列的。”