html5/CSS3
listenlgs
这个作者很懒,什么都没留下…
展开
-
细说 CSS3 Box-sizing
CSS的盒模型(Box model)是CSS运用中比较重要的一个属性,Box-sizing是CSS3的Box属性之一,它遵循CSS的Box model原理,CSS中Box model是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型,如下:1)W3C W3C定义的盒子模型包括margin、border、padding、content ,元素的width=content的宽度 height原创 2018-04-07 18:24:35 · 1134 阅读 · 0 评论 -
HTML5之Svg(四)笔画与填充
前面我们重点都在总结各类形状,文本和图片,接下来,我们还是和讨论canvas一样,总结一下颜色处理,也就是填充和边框效果;你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中,也可以以CSS的形式保存(这是与canvas不一样的地方)。填充色 - fill属性 这个属性使用设置的颜色填充图形内部,使用很简单,直接把颜色值赋给这个属性就可以了。看例子:<rect转载 2017-08-04 14:22:43 · 2409 阅读 · 0 评论 -
HTML5之Svg(三)文本与图像
SVG中渲染文本 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件。任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行。尽管SVG的文本渲染如此强大,但是还是有一个不足之处:SVG不能执行自动换行。如果文本比允许空间长,则简单地将它切断。多数情况下,创建多行文本需要多个文本元素。此外,可以使用 tspan 元素可以将文本元素分成几部分转载 2017-07-21 16:42:05 · 806 阅读 · 0 评论 -
HTML5之svg(如何绘制图型)
基本形状 SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了。废话不说了,直接看例子,这个最直接: stroke="orange" fill="transparent" stroke-width="5"/> stroke="green" fill=转载 2017-06-30 16:42:25 · 10479 阅读 · 1 评论 -
HTML5之svg
位图与矢量图 以前,浏览器中显示的图形,例如jpeg、gif等,都是位图,这些图像格式是基于光栅的。在光栅图像中,图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强,但是在某些情形下会显得不足。例如,当浏览器以不同大小显示一副图像时,通常会产生锯齿边缘,这时,浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值;这样会导致图像失真。此外转载 2017-06-23 13:23:58 · 1002 阅读 · 0 评论