随笔分类 -  html5+css3

IE8兼容css3
摘要：ie8不支持css中的阴影和圆角，因此采用插件pie.htc 下载完成添加到项目中，建议放在js或者css文件夹里面，编写css时在需要做兼容的地方加上“behavior:url(pie.htc路径);”，示例代码如图所示： 使用pie.htc需要注意以下几点： 1．添加pie.htc时路径是相对于 阅读全文
posted @ 2019-08-08 10:27 Koidt 阅读(1321) 评论(0) 推荐(0)
适配问题
摘要：注意：容器的宽度高度用rem为单位，但是字体大小font-size还是用px,而不是用rem。标题类文字，超过30px的话，也可以用rem设置字体。 步骤1： 设置viewport，也就是平时写移动端页面都要加上的： 步骤2、 页面引入flexible.js，此适配js代码是拿淘宝的来用的。适配的j 阅读全文
posted @ 2018-08-31 13:02 Koidt 阅读(235) 评论(0) 推荐(0)
手机端鼠标点击出现蓝色背景
摘要：body{-webkit-tap-highlight-color:transparent;} 或者*{-webkit-tap-highlight-color:transparent;} 阅读全文
posted @ 2018-08-27 18:12 Koidt 阅读(370) 评论(0) 推荐(0)
input只允许上传图片类型文件
摘要：这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题，可能要等 6~10s 才能弹出文件选择对话框。其实是accept=”image/*” 属性的问题，accept=”image/*”属性会对每一个文件都遍历一次所有的”image/*”文件类型，当文件较多时，文件的检验时 阅读全文
posted @ 2018-08-20 12:05 Koidt 阅读(5917) 评论(0) 推荐(0)
HSLA色相饱和透明度
摘要：H：Hue(色调)，取值为：0 - 360。将色相值想成一个圆环中的度数，随着在圆环上移动，得到不同的颜色。 S：Saturation(饱和度)，取值为：0.0% - 100.0%。数值越低（降低饱和度），颜色就会向灰色变化。 L：Lightness(亮度)，取值为：0.0% - 100.0%。增加 阅读全文
posted @ 2017-10-23 11:32 Koidt 阅读(872) 评论(0) 推荐(0)
Doctype作用？标准模式与兼容模式各有什么区别?
摘要：Doctype作用？标准模式与兼容模式各有什么区别? DOCTYPE是document type(文档类型)的简写,用来告诉浏览器的解析器使用哪种HTML或XHTML规范解析页面。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 知道多少种文档类型 HTML 4.01和XHTML 1.0规 阅读全文
posted @ 2017-03-10 21:16 Koidt 阅读(4103) 评论(0) 推荐(1)
html5中viewport与meta详解
摘要：网上解释手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 vie 阅读全文
posted @ 2016-12-22 11:33 Koidt 阅读(796) 评论(0) 推荐(0)
transform-origin
摘要：transform-origin：改变原点中心位置 transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，transform-origin并不是transform中的属性值，他具有自己的语法。但是该属性只有在设置了transform属性的时候才能起作用。 默认情况，变形的原 阅读全文
posted @ 2016-12-21 00:37 Koidt 阅读(887) 评论(0) 推荐(0)
css3 绘制图形
摘要：星形： 五角星： 五边形： 六边形： 八边形： 心形： 梯形： 阅读全文
posted @ 2016-12-20 23:24 Koidt 阅读(259) 评论(0) 推荐(0)
css3绘制六边形
摘要：六边形思路：使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素，并利用css3的边框样式，将这两个元素变成三角形放置在源元素的两端即可。 阅读全文
posted @ 2016-12-20 22:23 Koidt 阅读(5055) 评论(0) 推荐(0)
border-radius 圆角
摘要：border-radius:3px; 参数的单位可以使绝对的像素px，也可以用相对单位%; 参数顺序是左上角，右上角，右下角，左下角. 圆角： 不同设置： 过渡效果： 阅读全文
posted @ 2016-12-20 21:02 Koidt 阅读(232) 评论(0) 推荐(0)
css3绘制三角形
摘要：将div的宽和高设置为0；利用border-width、border-style、border-color属性绘制不同位置边框的样式。将不需要展示的三角颜色填充为transparent透明即可，就能得到某一部分三角。 （左下） （左上） （右上） （右下） 阅读全文
posted @ 2016-12-20 16:45 Koidt 阅读(392) 评论(0) 推荐(0)
canvas绘制形状
摘要：栅格 之前简单模板中有个宽/高150px的canvas元素。如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（Y轴）x像素，距离上边（ 阅读全文
posted @ 2016-12-11 22:20 Koidt
Canvas的基本用法
摘要：canvas没有设置宽度和高度的时候，会初始化宽度：300像素和高度：150像素。可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。 如果你绘制出来的图像是扭曲的, 尝试在<canvas>的属性中明确规定宽和高，而不是使用CSS。 阅读全文
posted @ 2016-12-11 20:57 Koidt