关于盒子模型的应用(制作三角形)
2016-03-28 21:23
183 查看
HTML代码:
<article>
<div class="demo_1">
</div>
</article>
CSS代码:
article .demo_1{ border:100px solid red; border-left-color: #0066cc; border-right-color: #080808; border-bottom-color: #339900; height: 0; width: 0; }
原理:盒子模型分为四个模块:
1:外边距(margin)
2:边框(border)
3:内边距(padding)
4:内容(content)
当内边距和内容宽和高都为0的时候,能显示的部分就只有边框,而边框也具有四个属性:top bottom left right
利用这些属性分别设置颜色就可以显示出三角形的效果.
如果配合着伪类,就可以制作出很多奇特的效果
相关文章推荐
- 创建文本框的步骤及一些常见的知识点
- 短信中心号码
- java中static用法案例
- 《leetCode》:Missing Number
- hdu 1956 Sightseeing tour(混合图欧拉回路)
- 短信之离散
- 最大子矩阵问题(dp)
- 【慕课笔记】2-2 JAVA线程初体验-隋唐演义框架说明
- Spring如何实现自动依赖注入-------autowire
- HTML5与CSS3基础(五)
- BASE64编码和解码(VC源代码) 并 内存加载 CImage 图像
- java第三次作业
- Fluent NHibernate other example
- 【HRS项目】Axure后续问题解决---与SVN结合
- Java对象数组代码案例
- scanf() gets() getchar()
- 2016-3-28学习笔记
- bzoj 2081: [Poi2010]Beads
- 百度切片工具新功能:添加麻点,点击弹出图文组合信息窗口
- linux环境下Matlab中socket网络功能的实现