之前在网上碰到阿里前端的面试题,如下: 下图绿色区域的宽度为100%,其中有三个矩形,第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。 已知HTML结构是: <di…
标签:css3
禁用webkit textarea可调整大小和文本框焦点时边框
1. 取消拖动调整大小 /*css2.0*/ textarea {width: 400px;max-width: 400px;height: 400px;max-height: 400px;} /*css3.0*/ te…
利用 SVG 和 CSS3 实现有趣的边框动画
演示 | 下载 今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时,会有一个微妙的动画发生——网格元素变得透明,每条边有个顺时针的动画,创造了非常好的效果。这…
CSS3:border-image属性详解
语法介绍 border-image参数 属性名称: border-image 值: <‘border-image-source’> || <‘border-image-slice’> [ / &l…
迟到的中文 WebFont
(前端工程师福音,收藏一下) 三年前,有一个设计师面试一位 Web 前端工程师,其中有一段这样的对话: “如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?” “我会给…
移动开发之总结
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。 备注:transparent的属性值在android下无效。 …
响应式设计三部曲
原文:Responsive Design in 3 Steps 译文:响应式设计的三个步骤 译者:dwqs 现在,响应式Web设计无疑是非常流行的。如果你对响应式设计还不熟悉,可以看看我之前发表过的关于这方面的respo…
CSS学习笔记(十一) CSS3 Transition
1.会伸缩的搜索表单 常在 sf.gg 混的人都知道,它的顶部导航栏是这样的: 当输入框获得焦点就会变成这样的: 利用 CSS3 的 Transition 属性,我们可以简单做出一个类似的搜索表单出来: HTML 标记:…
移动页面注意项
适应设备宽高 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=…
HTML5+CSS3兼容收藏夹
CSS3选择器兼容IE6~8: Selectivizr 使用方法: <!--[if (gte IE 6)&(lte IE 8)]> <script src="http://s3.amazonaw…
CSS 3动画介绍
原文:A Beginner’s Introduction to CSS Animation 译文:一个初学者对CSS动画的介绍 译者:dwqs 现在,越来越多的网站使用了动画,并且形式多样,如GIF、SVG、WebGL、…
不得不收藏的——IE中CSS-filter滤镜小知识大全
前言 前段时间在做一个专题的时候用到了opacity不透明度属性,因为设计图上是半透明背景,白色文字 所以在IE用到了其支持的filter属性,听说这个属性还有不同的效果,不单单就只有不透明度而已,所以抽个时间赶紧来充下…