经常在有些网站上看到一些三角图形，但通常这些都是图片，现在石头就教你如何用纯css3技术来绘制三角图形。 下面是具体步骤，把这些看一遍你也就懂得怎样来绘制三角形、箭头了。 1、新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。 2、把它的宽高设置为height:0px; width:0px; 3、设置边框border属性，用来实现三角形。 首先要了解border具体是怎么样的，我写...
使用border绘制三角形的思路，就是border值设置一个很大的值，这样每边就会显示为四分之一块的三角形。这样不借助图片，可以直接绘制出三角形了。 一个栗子： #triangle{ height:0; width:0; border-top:solid 100px yellow; border-left:solid 100px purple; border-right:solid 100px purple; border-bottom:solid 100px yellow;} 效果： 如果设置了块的宽高，还是会呈现边线的效果，每个边线将会是一个等腰梯形...
canvas多弹跳小球 canvas绘制弹跳小球。
本文由 伯乐在线 - J.c 翻译，sunbiaobiao 校稿。未经许可，禁止转载！英文出处：www.deanhume.com。欢迎加入翻译小组。 最近，我参加了在伦敦举办的Facebook移动开发者大会。在那天期间，有很多的交谈，但真正让我关注的是一场关于性能的，名为“让m.facebook.com更快”的交流会，它的主题是关于Facebook如何不断努力改善网页性能和从中汲取的经验。 Facebook开发团队是使用Chrome Cannry来测试网页CSS性能的。Google Chrome ...
我们一直认为的border，大概是如下所示： .border { width:50px; height:50px; border: 2px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; } 效果如下： 然而，当我们增大border的值时，会看到如下效果 .border { width:50px; height:50px; border: 20px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; } 看到的效果如下所示： 我们会发现边框成为了一个梯形。 如果我们将宽高设...
引入 用 CSS 绘制三角形，只是对 border 属性的简单应用。平时使用 border 属性的时候多留意一下，就会发现其中的技巧。下面，我们先看以下代码： HTML代码：----------CSS代码：.test{ width: 10px; height: 10px; border-top: 50px solid black; border-right: 50px solid red; border-bottom: 50px solid blue; border-left: 50px solid orange;} 效果如下： 不难看出，当盒子内容的宽度和高度远小于边框...
CSS3我是灰太狼* { margin: 0; padding: 0;}#bigBigWolf { position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -300px; width: 600px; height: 600px;}#bigBigWolf div { position: absolute;}#bigBigWolf #url a { position: absolute; left: 0; top: 0; width: 600px; height: 600px; z-index: 100;}#bigBigWolf .face { left: 127px; bottom: 67px; width: 380px; height: 380px; border: 3px solid #...
css3绘制砖墙-没有用任何图片 .wall {width:600px; height:300px; margin:50px auto; font-family: 'Shadows Into Light', cursive; text-align:center; color:#000;background-image:-webkit-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(0,0,0,0.8) 100%),-webkit-linear-gradient(top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, trans...
1 2 3 4 5 6 7 :root,body{ 8 height: 100%; 9 width: 100%; 10 } 11 .z{ 12 width:200px; 13 height: 400px; 14 left: 400px; 15 position: absolute; 16 } 17 .z div{ 18 position: absolute; 19 20 } 21 .z .red{ 22 ...
早上在w3ctech上看到 中国第二届CSS Conf总结 的时候，真是开心极了； 自从去年在慕课网上看了第一届CSS conf 视频之后，整个人都震惊了，原来还有大会是专门用来讨论CSS的，而且分享的CSS知识真是让人眼界大开； 我在博客园写的第一篇博文《布局神器Flexbox》便是受到第一届CSS Conf的启发; 所以，算是结下了不解之缘；如今看到第二届分享的视频和PPT时，虽然才看到 《重拾 css 的乐趣（上）》 这一部分内容,但却很受启...
最近完成了公司安排的移动web触屏开发，期间涉及到在移动设备上显示线条，最开始采用PC常用的css board属性来显示1个像素的线条，但是发现在移动设备上并不美观，参考淘宝、京东的触屏发现它们均是采用浅细的线条来显示在移动设备上。 以下纪录了比较方便的4种绘制0.5像素线条方式 一、采用meta viewport的方式，这个也是淘宝触屏采用的方式 常用的移动html viewport的设置如下 具体意思就不多提...
巧用css的border-radius属性，也能绘制出好看的图形 html部分 用css创建图形 css部分 div{ margin: 8px;}.rectangle{ width: 250px; height: 150px; background: #6DC75F;;}/*三角形*/.sanjia{ border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 150px solid #6DC75F; width: 0; height: 0;}/*椭圆*/.tuoyuan{ width: 300px; height: 150px; background: #...
css3实现的绘制图形图案效果代码实例:如果使用css2实现绘制图形图案几乎是不可能的，或者说费好大的劲也只能够得到非常简单的图案，css3的出现将绘制复杂的图形这个目标成为可能，下面就是一个相关的代码实例，有这方面需要的朋友可以参考一下它的实现方式。代码如下: 蚂蚁部落div{ width:170px; height:140px; background-image: radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) ...
一个简单的SVG绘制图片的小案例。 效果图: 代码如下: 1 2 * { 3 padding: 0; 4 margin: 0; 5 } 6 7 body { 8 background-color: #d5d3d4; 9 }10 11 .container {12 width: 500px;13 height: 500px;14 position: relative;15 top: 80px;16 left: 50%;17 ...
今天分享“svg绘制圆形”部分 1、简单圆形 效果图如下： 关键代码： 代码解析： cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)； r属性定义圆的半径 2、圆形填充颜色及边框 效果图如下： 关键代码： 代码解析： fill 属性定义圆形的填充颜色（rgb 值、颜色名或者十六进制值）； stroke-width...