CSS
foreverling_ling
求索
展开
-
css data:image/svg+xml 不显示
原因:新版chrome不支持 # , 需要改成%23如: .toggle:after { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#ededed" stroke-wi原创 2021-10-06 20:47:00 · 4560 阅读 · 0 评论 -
border-image属性分析
border-image是CSS3的一个属性,由于比较复杂,总是处于一知半解的状态,今天下定决心,花时间整理了一下,供大家共勉和学习。border-image的用处没用border-image之前,觉得css的属性基本够用,border-image完全是将简单的工作复杂化,当学习完该属性以后,发现该属性的运用能够大大节省编码时间和效率,总结一下,大致适用于以下两个场景:元素边框不规则的情况。这时候原创 2016-08-19 09:31:00 · 22175 阅读 · 4 评论 -
自定义input的file标签形状
问题最近有一个需求是自定义input的file标签形状。file是input标签的一个属性,每个浏览器都有自己的一个形状,可点击区域也不尽相同,如下:Chrome和Opera Firefox IE11 IE10及其以下 可点击区域均用绿色线框标明。可以清楚地看到,IE10及其以下的点击区域原创 2016-08-19 13:38:28 · 2118 阅读 · 0 评论 -
CSS3实现动态进度条
CSS3的线性渐变使制造动态进度条成为可能。现在就来一步一步讲解如何创建动态进度条吧。以Chrome浏览器webkit内核为例。目标: 单个矩形条背景目标进度条,背景是淡蓝色,上面平铺了一层倾斜的深蓝色条状矩形。我们可以这样写:.box{ width:200px; height:30px; background: -webkit-l原创 2016-08-19 17:46:30 · 5525 阅读 · 0 评论 -
H5 canvas绘图描边小细节
最近在使用canvas时突然发现一个小细节,代码如下: <canvas id="canvas" width="200" height="200" style="border: 1px solid #ccc;"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canv原创 2016-09-05 10:56:02 · 1690 阅读 · 0 评论 -
css中word-break、word-wrap、white-space的区别
这三个属性很容易混淆,一段时间不用,基本上又忘光了。花时间将自己的心得整理一下,供以后查阅word-break定义单词内部的换行规则语法 word-break: normal|break-all|keep-all;normal使用浏览器默认的换行规则break-all允许在单词内换行,例如:.text{ width: 200px; border: 1px solid #原创 2016-09-05 11:40:13 · 991 阅读 · 0 评论 -
SVG和Canvas的区别
在HTML5时代,Canvas被提及的次数越来越多,但是你对SVG了解么?SVG和Canvas一样,可以在html文件里面描绘出各种各样的图形。区别1)SVG是矢量图,放大不失真,而Canvas是位图,由像素点组成,放大会失真 2)Canvas相较于SVG,支持的颜色数更多,更便于绘制色彩丰富的图像 3)Canvas基于HTML,而SVG基于XML兼容性SVG和Canvas都只能在IE8(不包含原创 2016-12-12 13:31:14 · 1787 阅读 · 0 评论