css是个神奇的东西，在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一，设计精巧，计算精密，令世人赞叹。那么如何用CSS画一个金字塔呢？
人丑话不多，先看一下效果
金字塔是由5个面组成的，即4个侧面和1个底面。我们可以把它看作是一个童年时期玩过的元宝，或者端午节戴在身上的福字。为什么这么说呢？
“横看成岭侧成峰”，我们看金字塔的俯视图是不是会看到这样一个图形，如下图所示
这是一个平面图形，如果让这个平面图形具有立体的效果不就是一个金字塔了么。即将上图的(0,0)沿着x轴旋转一定角度即可实现。
接下来就是绘制“元宝”的形状,侧面是4个三角形，底面是一个正方形。实现三角形可以采用 clip-path 的属性对可视区域进行裁剪。
由上图可知： clip-path 的只能兼容 高版本浏览器 。polygon代表多边形，所以利用该属性可以绘制多如下图形：
有了上述的图形之后，我们需要进行特殊的处理，才能得到我们想要的形状。因为我们要搭建金字塔，所有我们塔边的高度或者宽度需要大于底部的宽度和长度，不然的话无法搭成塔尖而形成如下图形：
故需设置大于底部宽和高,我们这里选取为高度为200px，宽度为100px，宽度需要和底部宽度保持一致。
假设我们现在已经有一个金字塔，我们可以取它的一个横截面如下图：
通过sin函数
解上面反三角函数求得A大约为75deg，以此类推我们可以算出其他图形旋转角度。
将上述的两种三角形通过适当的平移和旋转，得到如下图形：
合并之后得到如下图形
通过使用css3中的3D转化属性，将上图进行转化即可：
由上图可知：transform-style:preserve-3d兼容是支持高版本浏览器，支持部分ie浏览器
以上就是本文的全部内容，全部都是由css实现包括：
早在90年代中期到后期起草的 CSS1规范中就介绍过!important，它能够帮助开发者和用户在修改样式表的时候轻松覆盖原本的权重。一直以来!important的用法几乎没变，只在CSS2.1中有一点变化，并且在CSS3规范中没有对它做任何添加和修改。让我们来看一下!important是什么，以及在什么时候使用，如果你遇到类似情况，你就应该使用它。
层叠的概述
在我们对!important的正确用法进行探讨之前，让我们为本节的内容做个铺垫。之前，Smashing Magazine已经对CSS权重进行过深入的阐释。所以，如果你想详细了解CSS的层叠和权重关系就请读读这篇文章。
CSS权重早期在W3cplus中已进行翻译，如果您阅读英文有点吃力，可以阅读译文《你应该知道的一些事情——CSS权重》
——大漠
下面这个提纲描述了CSS文档是如何确定给不同的样式分配不同的权重的。在CSS规范中提及的关于层叠的一个大体概括：
找到所有作用于元素和属性的声明
一个样式是否作用于元素依赖于这个样式的权重和如下所示样式来源的顺序，下面这个列表中越靠前的权重越小:
用户代理声明（译注：如浏览器默认样式）
用户声明（译注：如用户浏览器选项设置或通过开发人员调试工具修改）
开发者声明（译注：如页面中引用的CSS）
带有!important的开发者声明
带有!important的用户声明
样式的应用依赖具体的情况，一个更加具体的选择器往往会比一个笼统选择器获得更大的权重。
样式的应用依赖样式出现的顺序（即，后面的会覆盖前面的）
从这个提纲中，你可能已经明白!important会如何改变权重以及它在层叠中扮演一个什么样的角色。接下来让我们看一下!important更多的细节。
语法和描述
!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值（感谢Brad Czerniak指出其中的差别）。这里有个简单的代码示例可以清晰地说明!important是如何应用于原本的样式中的：
#example {
font-size: 14px !important
}
#container #example {
font-size: 10px
}
在上面的代码示例中，由于使用了!important，id为“example”的元素字号将被设置为14px。
如果不使用!important，第二个样式声明的代码块很自然地比第一个的权重要大，原因有二：在样式表中第二个代码块要比第一个出现的晚（即，
它位列第二）；第二个代码块有更大的权重（是由两个id，#container
#example组合而成，而不是只有一个id，#example。但是因为第一个代码块里面包含了!important，所以对于字号设置来说它有更大
的权重。
见CSS权重与继承中关于权重的计算方法，如下图:
——译者：David
关于!important应该注意的一些地方：
当!important第一次在CSS1中被介绍时是这样规定的，即一个由开发者声明的!important样式要比一个由用户声明的!important样式获得更大的权重。为了提高访问性，在CSS2 中它被颠倒了过来。
如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被作用上!important。
关键字!important必须放在一行样式的末尾并且要放在该行分号前，否则就没有效果。 （不过分号前的空格不会影响它）
如果因为一些特殊原因，你不得不在一个代码块中声明两个同样的属性，那么请把!important加在第一个属性后面，因为这样做会让所有浏览器中第一个属性的权重更大，而IE6除外（这是一个只有IE6才有的hack，但是不会影响你的CSS）
在IE6和IE7中如果你使用不同的单词替代!important（像!hotdog），这条CSS样式依然会获得更大的权重，但是其他浏览器却会忽略它。
针对第二点，译者作出如下标注：
.e{margin: 0 !important}
那么就等价于
.e{
margin-top: 0 !important
margin-right: 0 !important
margin-bottom: 0 !important
margin-left: 0 !important
}
——译者：David
何时该使用!important
使用任何技术的利弊都视情况而定。下面是我个人对如何有效使用!important的一些观点。
永不使用
非到万不得已不要用!important。如果你是出于懒惰使用!important，为了避免例行的调试而滥用它，那么你（或者是那些后继开发你项目的人）将会深受其害。
如果你并非滥用只是有偶尔用一下!important，同样，你很快就会发现你的样式会难以维护。正如上面我们讨论过的，本来，CSS会根据层叠和
权重产生正常的作用顺序。但当你使用了!important就扰乱了原本的顺序，让更多的权重给了正常情况下本不应该获得这么多权重的样式。
如果你从不使用!important，那么这标志着你真正理解了CSS并且证明你在编写代码前经过深思熟虑。
正如古老的格言所说“永远不要说‘永不’”，所以接下来我们还是要来讨论!important的一些合理的用法。
帮助测试可访问性
正如前面提到过的，用户样式中可以包含!important声明，允许用户根据自己的特殊需求来给具体的CSS样式增加权重以帮助他们阅读和访问内容。
有特殊需求的用户可以把!important加到像font-size这样的打印属性上来加大字体，或者为了提高网页的对比度而把它加到与颜色相关的样式上。
下面这张Smashing Magazine首页的截图，展示的正是借助FireFox的开发人员工具把正常大小的文本用用户自定义样式覆盖后的效果：
在这个案例中，文本大小是随浏览器窗口大小可调节的，样式中并没有使用!important，所以用户定义的样式会忽略权重而覆盖开发者的样式。然
而，如果body正文的文本大小是开发者使用!important来设置的，就算用户用更加具体的选择器定义了样式也不能覆盖这个文本大小的设置。因此，
即使在用户样式的作用下，甚至是开发者自己滥用!important的情况下，这条包含!important的样式不仅解决了问题，还保持了文本大小的可
调节性。
暂时解决紧急问题
总会有这样的情况发生——某个客户的线上网站出现了CSS的bug，你必须快速修复。在大多数情况下你应该会用Firebug或者其他的开发者工具
来调试你的CSS代码并且最终修复它。但是，如果这个bug发生在IE6或者是其他没有提供调试工具的浏览器上的时候，你可能需要使
用!important来完成快速修复。
当你用这个临时修复的办法让网站继续上线以后（这样可以先摆平客户），你再花些时间用不破坏层叠且可维护性高的方法来修复这个bug也为时未晚。当你找到更好的解决方案你就可以替换掉线上的!important部分，而且客户对此毫不知情。
用Firebug或者其他开发者工具覆写样式
我们可以使用Firebug或者Chrome开发者工具（译注：两者均可用F12唤出）查看页面元素，在不影响真正的CSS样式的情况下可以自由地
编辑样式，测试效果，调试bug等等。下面这张截图展示的就是在Chrome开发者工具中看到的Smashing Magazine的一些样式：
图中红框内带有删除线的样式表明它已经被后面的样式覆盖掉了。为了让这条样式再次作用，你得禁用后面的样式。你也可以把选择器写得更加具体以增加权重，但是这样会让整个代码块的权重都增加，这并不是我们想要的。
!important可以被加在单行样式的后面从而让已经被覆盖的样式重新作用。这样的话，你不用大量修改你真正的样式就可以调试你的CSS，直到你找到问题所在。
下图所示是在上图那条相同的样式后面加了!important。你可能已经注意到之前的删除线不见了，因为现在这条样式要比之前覆盖它的那条有更大的权重：
覆写用户生成内容中的行内样式
CSS开发中一个让人头疼的问题，就是当我们遇到用户生成内容中有行内样式的情况，这种情况多发生在一些使用了所见即所得网页编辑器的CMS系统
中。在CSS层叠中，行内样式会覆盖常规样式。然而，我们并不想看到那些本该被我们定义好的CSS样式作用的元素却被用户生成内容中的行内样式改变。此时
你就可以用!important来避免这种问题，因为，一条被开发者加了!important的样式会覆盖行内样式。
你可以给只在打印时生效的样式加上!important,虽然不是所有情况下都需要这样做，而且正如我们之前提到的那些原因一样也不建议这么做。但是，这样可以让你在不用重复编写选择器的情况下就能覆盖具体的样式。
打印样式即打印机在打印网页时所使用的样式，关于打印样式的细节可以阅读这篇文章
——译者：David
关于单独设计的博客页面
如果你曾经接触过设计个人博客页面的技术（许多设计师反对将 “艺术指导”用于这种技术，确实如此），像Heart Directed中展示的那样，你会发现有一种需求要求每个单独的文章都要有它自己独立的样式，抑或你需要使用行内样式。你可以用这篇文章中给出的代码为一个个人页面编写它自己的样式。
!important在这个时候可以派上用场，为了在你的站点里创建一个独一无二的页面，你可以轻松覆盖默认的样式而不必担心原本的CSS权重。
可以通过background-size属性来设定背景图片的大小。它可以是像素（px）或者是百分比(%)，举例说明：background-size:950px* 200px这表示把背景图片大小调整为宽度950像素，高度200像素。
1、background-size的语法说明：
(1)属性名:background-size
(2)属性值:其中 bg-size = [|| auto ]{1,2} | cover |
contain
(3)初始值:auto auto
(4)应用于:所有元素
(5)继承性:无
(6)百分比:后面会说明
(7)计算值:根据指定
2、代码说明：
/* 一个值: 这个值指定图片宽度，第二个值为auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px
/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景，用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但必须用逗号隔开。 */
background-size: auto, auto /* 请区别于background-size: auto auto*/
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit
扩展资料：
背景重复：
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
背景图像将从一个元素的左上角开始。如下：
body
{
background-image: url(/i/eg_bg_03.gif) background-repeat: repeat-y
}
背景定位：
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif')
background-repeat:no-repeat background-position:center
}
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
参考资料来源：w3school：CSS 背景
