- 浏览: 3315646 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
见了很多web-kit打头的css属性,但是由于这些属性比较新,不知道是什么意思,特此收集记录。
很多-web-kit打头的css,还有-moz-, -o, -ms-等,但是也不是所有的都已经成为标准,所以有些情况只能写webkit。
2015-05-06
-webkit-margin-collapse
-webkit-margin-after-collapse:separate; #相邻的元素合并后分离
-webkit-margin-before-collapse:discard; #相邻的元素合并前丢弃
-webkit-user-select:none 不允许用户选择。
-webkit-text-size-adjust
1、当样式表里font-size < 12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效(使字体大小不受设备终端的调整)
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的
例子:
body{
-webkit-text-size-adjust: none;
-moz-text-size-adjust:none;
-ms-text-size-adjust: none;text-size-adjust: none;
}
-webkit-tap-highlight-color
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮,设置颜色的alpha值为0即可。
例子:
body{-webkit-tap-highlight-color: rgba(0,0,0,0);}
见了很多web-kit打头的css属性,但是由于这些属性比较新,不知道是什么意思,特此收集记录。
很多-web-kit打头的css,还有-moz-, -o, -ms-等,但是也不是所有的都已经成为标准,所以有些情况只能写webkit。
2015-05-06
-webkit-margin-collapse
-webkit-margin-after-collapse:separate; #相邻的元素合并后分离
-webkit-margin-before-collapse:discard; #相邻的元素合并前丢弃
-webkit-user-select:none 不允许用户选择。
-webkit-text-size-adjust
1、当样式表里font-size < 12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效(使字体大小不受设备终端的调整)
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的
例子:
body{
-webkit-text-size-adjust: none;
-moz-text-size-adjust:none;
-ms-text-size-adjust: none;text-size-adjust: none;
}
-webkit-tap-highlight-color
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮,设置颜色的alpha值为0即可。
例子:
body{-webkit-tap-highlight-color: rgba(0,0,0,0);}
发表评论
-
静态时间轴和动态时间轴实现原理
2015-07-12 17:24 5720作者:zccst 一、静态时间轴,仅css即可 HTML结构 ... -
[css3特效]loading加载中
2015-03-25 15:53 3585作者:zccst 以前loading都是一张图片,显示或隐藏 ... -
display,position和float之间的关系
2015-03-17 12:18 5596作者:zccst 对‘display ... -
CSS中的几种颜色表示法,如hsla
2015-03-15 17:47 1376作者:zccst 平常相对熟悉的也就RGB色了,其他基本不清 ... -
[css3]知识点积累
2015-03-14 22:28 1241作者:zccst animation , keyframe ... -
[css3]知识点(自己总结版)
2015-03-13 20:11 1402作者:zccst CSS3是一个包含多方面的知识,主要分两大 ... -
[css3]流式布局要点
2015-03-08 13:16 3356作者:zccst 让一个div水平、垂直居中 一、流 ... -
单行溢出和多行文本溢出
2015-03-05 18:54 6795作者:zccst 一、单行溢 ... -
table表格内容过多时自动换行css
2014-12-04 20:44 8225作者:zccst 总结了一下 ... -
div+css布局总结
2014-09-04 10:48 1422作者:zccst 3,position布局 #wrap ... -
print打印网页相关
2014-06-10 10:24 810作者:zccst 1,CSS <link hr ... -
CSS基础:text-overflow:ellipsis溢出文本
2014-01-15 17:12 38045作者:zccst 2015-06-19 今 ... -
纯CSS来画基本的矩形、圆形、椭圆、三角形、多边形等
2014-01-06 13:52 4647作者:zccst 2015-3-18 除了常规的三角形外,还 ... -
让table和table中的TD在指定区域滚动
2013-10-28 20:14 3900使用的属性如下: <div style="w ... -
div被撑大
2012-06-26 22:26 2156作者:zccst 情形二:外层div高度自适应,内部还有div ... -
常见CSS设置
2012-06-19 11:35 1149作者:zccst 1,图片与文字垂直对齐 办法一、设置块元素 ... -
自适应网页设计
2012-06-13 10:58 1139zccst转载 原地址:http:// ... -
CSS颜色代码
2012-05-17 17:02 1249作者:zccst 虽然CSS代码颜色有RGB组成,看似简单, ... -
CSS较好的网站推荐
2012-05-01 16:51 1167作者:zccst 在每一个领域都会诞生很多优秀的专业网站, ... -
background-position释义
2012-05-01 16:37 1286作者:zccst background-pos ...
相关推荐
在CSS3中,弹性布局(Flexbox)是一种强大的布局模式,允许开发者更加灵活地控制元素在容器中的排列、对齐和大小调整。在早期的浏览器实现中,WebKit浏览器(如Safari和Chrome)引入了一个实验性的前缀 `-webkit-box...
这个属性丢失,导致了不生效,在Styles里把这个属性加上就好了,于是断定是编译过程导致这个属性丢失。 二、解决办法 网上找了一个可行的解决方案,把autoprefixer关掉,有一种写法: /*! autoprefixe
虽然Webkit内核浏览器具有一定的共通性,但其他非Webkit内核的浏览器(如Firefox和IE)可能对某些CSS属性的支持情况不同。因此,在实际应用中,建议进行广泛的测试以确保效果的一致性。 ### 总结 通过以上介绍,...
**WebKit CSS3 动画基础** WebKit 是一个开源的网页渲染引擎,被广泛应用于苹果的 Safari 和谷歌的 Chrome 浏览器中。CSS3 动画是 Web 开发中的一个重要组成部分,它允许开发者通过时间序列控制元素的视觉变化,...
### Webkit内核浏览器默认CSS属性详解 #### 引言 在前端开发中,了解不同浏览器内核的默认样式设置对于实现跨浏览器兼容性至关重要。WebKit作为一款流行的浏览器引擎,被广泛应用于Safari、Google Chrome等浏览器...
1. CSS3 `-webkit-transform` 属性: `-webkit-transform` 是一个非标准的CSS属性,但在Webkit内核的浏览器(如Chrome和Safari)中广泛支持。它允许对元素进行2D和3D转换,如旋转、缩放、平移和倾斜。在这个场景中...
这些HTC文件通常通过定义自定义的CSS属性(如-moz-border-radius或-webkit-border-radius)并在HTC文件中解析和应用这些属性,来实现IE6的圆角效果。 然而,需要注意的是,使用HTC文件会带来一些性能问题,因为它们...
为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒...
虽然大部分现代浏览器都支持CSS3的`animation`和`transform`属性,但在某些老版本的浏览器中可能需要添加前缀(如 `-webkit-`)来确保兼容性。同时,为了给不支持这些特性的浏览器提供备选方案,可以使用`fallback`...
"css3 transform属性创意Loading加载动画效果"正是这样一个利用前沿技术实现的优秀案例。 CSS3中的`transform`属性是一个强大的工具,它可以对元素进行二维或三维的变换操作,如旋转(rotate)、缩放(scale)、平...
6. **兼容性**:虽然现代浏览器对CSS3支持良好,但为确保老版本浏览器也能正常显示,需要检查并应用适当的浏览器前缀,如 `-webkit-`,`-moz-`,`-ms-` 和 `-o-`。 在实际应用中,这个特效可能被用于各种项目,如...
【CSS3 Transform属性详解】 CSS3的transform属性是现代网页设计中的一个重要工具,它允许我们对元素进行二维或三维的变换操作,如旋转、缩放、平移和倾斜等,从而创造出丰富的动态视觉效果。在本示例中,"css3 ...
在网页设计中,CSS3(层叠样式表第三版)为开发者带来了许多强大的新特性,其中之一就是gradient属性。这个属性允许我们创建出丰富多彩、动态感十足的渐变效果,极大地提升了网页界面的视觉吸引力。本资源"纯CSS3 ...
本文将详细探讨如何实现CSS3圆角在火狐(Firefox)、Internet Explorer(IE)以及基于WebKit内核的浏览器(如Chrome和Safari)中的兼容性。 1. **火狐浏览器(Firefox)兼容性** 火狐从Firefox 3.6版本开始支持CSS...
1. `-webkit-` 前缀:WebKit浏览器支持许多实验性的CSS属性,它们在正式标准化之前会有特定的浏览器前缀,如`-webkit-border-radius`用于圆角,`-webkit-box-shadow`用于阴影,`-webkit-linear-gradient`用于线性...
css3 Animation属性参数介绍例如@keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari 和 ...
在本实例中,CSS3的transform属性被用于实现3D立方体的旋转效果,通过设置rotateX、rotateY和rotateZ来控制立方体的各个轴向转动。 实现3D立方体旋转需要用到的关键CSS3属性有: 1. `perspective`:定义观察者与3D...