随笔分类 - CSS
摘要：方法:document.getElementById("xx").style.xxx中的所有属性是什么盒子标签和属性对照CSS语法（不区分大小写）JavaScript语法（区分大小写）borderborderborder-bottomborderBottomborder-bottom-colorborderBottomColorborder-bottom-styleborderBottomStyleborder-bottom-widthborderBottomWidthborder-colorborderColorborder-leftborderLeftborder-le
阅读全文
摘要：CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构，以及定位。正如positioniseverything，本文将主要讲述关于position的理解，力求让您看完本文后对position有着最全面的认识。position的四个属性值：relativeabsolutefixedstatic下面分别讲述这四个属性。<div id=”parent”><div id=”sub1″>sub1</id><div i
阅读全文
摘要：作为一个合格web前端人员，掌握各个浏览器对CSS的兼容性是比不可少的一种能力，也是将你与数不尽前端工作人员区分开来的一个重要指标，还等什么，赶快成为那少数的一部分吧！下面是一些常用的CSS兼容技巧1)火狐下给div设置padding后会导致 width和height 增加, 但IE不会.(可用!important解决)2)垂直居中，将 line-height设置为当前div相同的高度, 再通过vertical-align: middle；( 注意内容不要换行)3)水平居中，margin:0 auto;(当然不是万能)4)若需给a标签内内容加上样式, 需要设置 display: block;(
阅读全文
摘要：36 CSS Frameworks for Designers最近看到一篇关于css框架的文章，感觉不错，跟大家分享一下！我想会有很多的css 的设计人员都相信用css框架会使工作变得更快和更容易，不需要去做许多重复的额外的劳动，应用框架的功能我们可以用更少的代码去做更多事，而且也使代码变得更加的轻巧可读。像PHP的CI,Yii等框架就非常的优秀。这里有这么多的框架，我们可以根据自己的兴趣爱好，使用习惯选择一两个最适合自己的，俗话说，适合自己的才是最好的嘛！So Good Luck …1.1KB CSS GRIDMost of the CSS frameworks out there are
阅读全文
摘要：W3C最近更新了CSS选择器（Selector）第四版的草稿，添加了一些新的特性及规则，我们可以先了解一下！$E > F：an E element parent of an F element该条规则允许你通过子孙元素来筛选元素，例如：$p>span{color:red} /*选择含有span的p元素*/终于可以换个思维（原来是从上到下，现在是从下到上）换个来写CSS了，期待阿！伪类：:any-link和:local-link:any-link用于任何的超链接，而:local-link将用于指向当前域内的超链接伪类：:dir() 文字排版方向，例如：p:dir(ltr){}p:di
阅读全文
摘要：在IE8中CSS有时候会出现异常，解决方法是在<head></head>标签对中加入<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />,试试吧！
阅读全文
摘要：CSS允许我们追加(:after)或是预加(:before)内容，用于动态内容及静态内容(attr())，图像(url())和计数内容(counter())属性。对想要在鼠标经过时显示一些信息的情况非常好用。实例代码：<style type="text/css">ul li:hover:after{content: attr(title);}</style><ul><li id="myList" title="use css to append info for list">hello,
阅读全文
摘要：1.创建一个漂亮的图标这个教程将教你如何用纯 CSS3 创建一个图中的图标2.CSS3 图片样式这个教程将教你如何使用 box-shadow， border-radius 和 transition。3.CSS3 Transition 的模糊效果4.实用的 CSS3 圆角表格5.创建纯 CSS3 的票式标签6.原始的鼠标浮动效果这个教程将创建缩略图的鼠标浮动效果。当鼠标移动到一个缩略图上的时候，我们将显示一些描述并使用不同的样式。7.用 CSS3 来创建旋转的光束动画效果哦！8.用 CSS3 来创建具有动画效果的按钮9.用 CSS3 创建旋转的报纸效果类似于老式电影中的那种特效，报纸旋转并固定在
阅读全文
摘要：自从CSS3诞生以来，开发人员的生活都变得轻松多了。这篇文章里面收录经最新非常有用的CSS3教程，能够提升所有的爱好者或开发人员的技能，如果你有其他好的教程，不妨也告诉我，让我也学习学习。Making a CSS3 Animated MenuPhotobooth with PHP, jQuery and CSS3How To Create a Stylish Button Entirely with CSS3Create Digital Poster Design with CSS3 OnlyCreate Attractive Web Typography with CSS3 and Lett
阅读全文
摘要：针对不同的的浏览器语句写法稍有不同。Gecko引擎的使用的语句为“ -moz-linear-gradient”，而WebKit的引擎使用的是-webkit-gradient。有略微的不同，但实现效果是一样的。基于gecko的浏览器(Firefox)：linear线性渐变是该语句的一部分top:顶部渐变开始的地方＃FFFFFF 十六进制的颜色渐变的开始颜色（白色）＃003366 十六进制的颜色渐变的结束颜色（深蓝色）基于Webkit的浏览器(Chrome, Safari)：linear作为-webkit-gradient的值的一部分，放在括号内。left top左上角声明梯度开始left bot
阅读全文
摘要：1. 首先了解一下box-shadow属性的浏览器兼容性用一段代码来解释或许更好： -webkit-box-shadow: 0px 0px 4px #000; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 0px 0px 4px #000; /* FF3.5 - 3.6 */ box-shadow: 0px 0px 4px #000; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */2. box-shadow属性的语法box-shadow有六个可设值:se...
阅读全文
摘要：CSS3 transform是什么？transform的含义是：改变，使…变形；转换CSS3transform都有哪些常用属性？transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotateX() 和 rotateY() ，以此类推。下面我们来分解各个属性的用法：transform:rotate()：含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform
阅读全文
摘要：target 伪类target 伪类用于改变锚链接URL所指向的ID的样式。示例：<style>#div1:target{background:#FF0;}</style><div id="div1">div1</div><a href="#div1">到div1</a>复制代码运行即可。单击”到div1″后div1的背景即为黄色。
阅读全文
摘要：CSS是网页设计非常重要的一部分，随着越来越多的浏览器对CSS3支持的不断完善，设计师和开发者们有了更多的选择，CSS3对CSS规范做了很大的改进，网站开发者能通过CSS3为网站设计增添很多时尚元素。这里就有30个令人惊叹的CSS3动画演示效果，它们证明了CSS3能给我们带来的巨大的可能性。1. Pure CSS Coke Can2. Colorful Clock3. jQuery DJ Hero4. Animated Pricing Column5. Slick jQuery Menu6. Frame-by-Frame Animation (Hover to Play)7. AT-AT Wa
阅读全文
摘要：HTML部分：<p class=”threeD”>The Third Dimension</p>CSS部分:深度效果使用多层text-shadow，使用offset和blur产生偏移效果。p.threeD{text-shadow:-1px1px0#ddd,-2px2px0#c8c8c8,-3px3px0#ccc,-4px4px0#b8b8b8,-4px4px0#bbb,0px1px1pxrgba(0,0,0,.4),0px2px2pxrgba(0,0,0,.3),-1px3px3pxrgba(0,0,0,.2),-1px5px5pxrgba(0,0,0,.1),-2px
阅读全文
