随笔分类 -  CSS

1 2 3 下一页
CSS3阴影 box-shadow的使用和技巧总结
摘要：text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor 阅读全文
posted @ 2016-04-09 15:28 名字不能缺 阅读(614) 评论(0) 推荐(0)
css3动画
摘要：动画库使用微场景页面 animations.css 阅读全文
posted @ 2016-04-01 13:44 名字不能缺 阅读(419) 评论(0) 推荐(0)
响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)
摘要：最近遇到这种头疼的问题，百思不得其解，不耻下问，悬梁刺股这些事情都做过之后，终于看到希望，于是攒见好就收，感觉整理分享给大家，希望有所帮助。 对手机分辨率和网页像素的初步认识是，是2倍的差别。 但是让人费解的是为什么还要 1.325 这种数据呢，原来是这么回事： 举个栗子： 以下是我摘抄并翻译的，想 阅读全文
posted @ 2016-04-01 11:18 名字不能缺 阅读(798) 评论(0) 推荐(1)
css3毛玻璃模糊效果
摘要：CSS3 blur滤镜实现如下测试代码： 相关HTML代码如下： 需要注意目前火狐不支持，其他些浏览器，如FireFox到目前还没有支持CSS3 filter. 当然，要实现（比方说）FireFox 24浏览器上照片变模糊的效果，也是可以的。可以使用SVG的模糊滤镜。新建文命名为blur.svg的S 阅读全文
posted @ 2016-03-22 10:01 名字不能缺 阅读(607) 评论(0) 推荐(0)
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦
摘要：CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等 新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子 1.长方形 #Rectan 阅读全文
posted @ 2016-03-17 16:15 名字不能缺 阅读(345) 评论(0) 推荐(0)
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
摘要：Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: [css] view plain copy .Absolute-Center  阅读全文
posted @ 2016-03-10 17:23 名字不能缺 阅读(295) 评论(0) 推荐(0)
CSS 去掉inline-block间隙的几种方法
摘要：最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及去掉间隙的方法，在这里做一个简单的总结。 inline-block是什么 inl 阅读全文
posted @ 2016-03-02 17:02 名字不能缺 阅读(1604) 评论(0) 推荐(0)
如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式？
摘要：Safari 上的默认样式是这样的， 背景颜色可以使用background-color改变，但中间那个点始终无法去掉。 我查了一些jQuery插件，如iCheck.js，但是那说明写得我都看不明白，根本不知道如何使用。 还有-webkit-appearance:none;属性会直接将input[ty 阅读全文
posted @ 2016-02-22 09:58 名字不能缺 阅读(1929) 评论(0) 推荐(0)
display:inline-block引发的间隙思考
摘要：一、导火线没错，总有一类属性在助你轻松寻得捷径的同时，也可为你增添烦劳，比如本文的主谋display:inline-block。众前端们所诸知，其作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。然而不幸的是，它并没有得到所有浏览器的支持，比如ie... 阅读全文
posted @ 2016-01-04 17:41 名字不能缺 阅读(230) 评论(0) 推荐(0)
HTML中让表单input等文本框为只读不可编辑的方法
摘要：有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使 的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。方法1: onfocus=this.blur() 当鼠标放不上就离开焦点方法2:readonly方法3: disabled完整的例子:disabled="true... 阅读全文
posted @ 2015-12-30 17:42 名字不能缺 阅读(169) 评论(0) 推荐(0)
纯CSS实现箭头、气泡让提示功能具有三角形图标（简单实例）
摘要：此方式浏览器兼容，显示结果： 向左的箭头: 只有三个边：上、下、右。 而 向右... 阅读全文
posted @ 2015-12-30 17:26 名字不能缺 阅读(1049) 评论(0) 推荐(0)
css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程
摘要：一个滚动代码，其他浏览器都滚的好好的，就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CSS IF使用与实例一个滚动代码，其他浏览器都滚的好好的，就IE出现错误！气愤！随想起IE的条件语句，... 阅读全文
posted @ 2015-12-28 13:46 名字不能缺 阅读(496) 评论(0) 推荐(0)
IE下判断IE版本的语句...[if lte IE 8]……[endif]
摘要：IE6及其以下版本可见IE7及其以下版本可见只有IE6版本可见除了IE以外的版本IE8以下的版本可见IE7及大于IE7的版本可见用法：（1）可使用如下代码检测当前IE浏览器的版本（注意：在非IE浏览器中是看不到效果的）您正在使用IE浏览器版本 5版本 5.0版本 5.5版本 6版本 7那如果当前的浏... 阅读全文
posted @ 2015-12-28 13:43 名字不能缺 阅读(273) 评论(0) 推荐(0)
有关opacity或RGBA设置颜色值及元素的透明值
摘要：opacity声明来设置元素的透明值，当opacity设置元素的透明值，内部的文字及元素也会透明，通过RGBA设置的颜色值只针对当前元素，内部的文字及元素的透明值并未发生变化opacity声明来设置元素的透明值（改透明度的值介于0-1之间的小数, 0.5表示50%透明）。opacity的特点是：当o... 阅读全文
posted @ 2015-12-28 13:22 名字不能缺 阅读(558) 评论(0) 推荐(0)
IE8下实现兼容rgba
摘要：昨天遇到一个问题，要实现一个背景透明的效果，用CSS3用rgba()就能实现，即background: rgba(0,0,0,.5);但是要兼容到IE8，就发现没有透明效果，因为IE8不支持rgba()函数。下面我们总结一下rgba()函数的含义。rgba的含义，r代表red，g代表green，b代... 阅读全文
posted @ 2015-12-28 13:12 名字不能缺 阅读(178) 评论(0) 推荐(0)
CSS图片翻转动画技术详解
摘要：因为不断有人问我，现在我补充一下：IE是支持这种技术的！尽管会很麻烦。需要做的是旋转front和back元素，而不是旋转整个容器元素。如果你使用的是最新版的IE，可以忽略这一节。IE10+是支持的，IE9完全不支持CSS动画。CSS动画非常的有趣；这种技术的美就在于，通过使用很多简单的属性，你能创建... 阅读全文
posted @ 2015-12-26 22:27 名字不能缺 阅读(426) 评论(0) 推荐(0)
CSS 的优先级机制[总结]
摘要：样式的优先级多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）External style sheet 测试！选择器的优先权解释：1. 内联样式表的权值最高 1000；2. ID 选择器的权值为... 阅读全文
posted @ 2015-12-11 13:57 名字不能缺 阅读(232) 评论(0) 推荐(0)
CSS3媒体查询(Media Queries)介绍
摘要：媒体类型all 所有设备screen 电脑显示器handheld 便携设备tv 电视类型设备print 打印用纸打印预览视图关键字andnot(排除某种设备)only(限定某种设备)媒体特性媒体特性共13种，可以说是一个类似CSS属性的集合。其中的大部分接受 min/max 的前缀，用来表示 大于等... 阅读全文
posted @ 2015-11-24 15:01 名字不能缺 阅读(212) 评论(0) 推荐(0)
textarea 在浏览器中固定大小和禁止拖动
摘要：HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改... 阅读全文
posted @ 2015-11-21 13:34 名字不能缺 阅读(205) 评论(0) 推荐(0)
CSS行高——line-height
摘要：初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识：顶线、中... 阅读全文
posted @ 2015-11-12 16:18 名字不能缺 阅读(219) 评论(0) 推荐(0)

1 2 3 下一页