透明度css

原文: CSS 阴影动画优化技巧一则 本技巧来自这篇文章 -- How to animate box-shadow with silky smooth performance 本文不是直译，因为觉得这个技巧很有意思很有用，遂起一文。 box-shaodw 在我们的工作中使用以及越来越多，伴随阴影的动画或多或少都有一点。假设，我们有下面这样一个盒子： ? 1 2 3 4 5 div { width : 100px ; height : 100px ; box-shadow: 0 2px 4px rgba( 0 , 0 , 0 , 0.3 ); } 希望 hover 的时候，盒阴影从 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) 过渡到 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) 。 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) OK，最简单的方法当然是： ? 1 2 3 4 div:hover { width : 100px ; box-shadow: 0 5px 15px rgba( 0 , 0 , 0 , 0.3 ); } 因为过渡动画是在两个不同的盒阴影状态在发生

CSS兼容技巧 1: FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会. 可用important解决 　　2: 居中问题. 　　 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过vertical-align: middle.( 注意内容不要换行.) 　　 2).水平居中. margin: 0 auto;(当然不是万能) 　　3: 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签) 　　4: FF 和 IE 对 BOX 理解的差异导致相差 2px,还有设为 float的div在ie下 margin加倍等问题. 　　5: ul 标签在 FF 下面默认有list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) 　　6: 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 　　7: 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 8: 针对firefox ie6 ie7的css样式 1:现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示， 　　2:但是ie7对

Doctype是什么？如何触发严格模式与混杂模式模式？区分它们有何意义？ 　　Doctype是document type（文档类型）的简写，是用来说明所用的XHTML或HTML是什么版本的。XHTML1.0 提供了三种DTD声明可供选择，分别是： 　　1、过渡的(Transitional，也叫混杂模式)：要求比较宽松，允许继续使用HTML4.01的标识，完整声明为 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranisitional.dtd" > 　　2、严格的(Strict)：要求严格的DTD，不能使用任何表现层的标识和属性，完整声明为 <! DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > 　　3、框架的(Frameset)：专门针对框架页面设计使用的DTD，如果页面中包含有框架，可以采用DTD，完整声明为 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3

常见的css样式 color 文字颜色 background-color 背景颜色 opacity 设置透明度 颜色： 光的三原色： 红 绿 蓝 三种颜色表示法： 名词表示法： red green blue 16进制颜色表示法： #000000 十六进制 0 --- f # ff（红色） 00（绿色） 00（蓝色） 十进制颜色表示法： rgb(255红,255绿,255蓝) 取值范围 0 --- 255 rgba(255红,255绿,255蓝,0.5透明度) 取值范围 0 --- 255 a 表示透明度 取值范围 0-1之间 0代表完全透明 1代表不透明 opacity 与 rgba() 设置透明度的区别： opacity：表示所有内容都更改透明度 rgba()：表示只有背景颜色透明 尺寸： width：宽 常见的计量单位： px(像素) %(百分比) em(字体单位) height：高 min-width 最小宽度 max-width 最大宽度 字体： font-size: 设置字体大小 浏览器默认的普通文字大小为16px 最低设置文字大小为8px 一般默认最低为12px 最大不限 font-style: 设置字体样式 normal表示普通体文字 italic表示斜体文字 font-weight: 设置字体粗细 normal表示普通体文字 bold表示粗体 font-family

CSS背景（background） 属性 描述 background-color 规定要使用的背景颜色。 background-image 规定要使用的背景图像。 background-size 规定背景图片的尺寸。 background-repeat 规定如何重复背景图像。 background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。 background-position 规定背景图像的位置。 inherit 规定应该从父元素继承background属性的设置。 背景图片（image） 语法： background-image : none | url (url) 参数： none : 　无背景图（默认的） url : 　使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。 小技巧： 提倡 背景图片后面的地址，url不要加引号。 背景平铺（repeat） 语法： background-repeat : repeat | no-repeat | repeat-x | repeat-y 参数： repeat :

CSS 可以添加背景颜色和背景图片，以及进行图片设置。 none : 　无背景图（默认的） url : 　使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。 小技巧： 我们提倡 背景图片后面的地址，url不要加引号。 背景平铺（repeat） 语法： background-repeat : repeat | no-repeat | repeat-x | repeat-y 　 参数： repeat : 　背景图像在纵向和横向上平铺（默认的） no-repeat : 　背景图像不平铺 repeat-x : 　背景图像在横向上平铺 repeat-y : 　背景图像在纵向平铺 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。 repeat-x : 　背景图像在横向上平铺 repeat-y : 　背景图像在纵向平铺 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。 背景位置(position) 语法： background-position : length || length background-position : position ||

　　今天开始学习CSS，一边看书，一边对着博客建立自己的学习笔记。 　　CSS的概念，应该稍微记一下，是Cascading Style Sheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，即是“样式表”。好的，概念的东西就到这里为止，接下来正式开始学习基本语法。 　　CSS的基本语法：选择符 { 样式属性：取值; 样式属性：取值;}（记得要有分号） 　　选择符被分为“类选择符”，“ID选择符”，“包含选择符”三种。 　　话说我还不知道怎样正确去定义选择符，不过先照着书看吧。 　　1，类选择符的语法是：标记名.类名{ 样式属性：取值；样式属性：取值;} 　　　　书上说，其中的类名是类选择符，这是可以自己定义的名称。在实际应用中，还可以省去HTML的标记名。 　　　　例如：p.red {color:red}可以写成：.red {color:red} 　　　　三是与直接定义HTML中的标记样式不同的是：这段代码仅仅是定义了样式，并没有应用样式。如果要应用样式中的red类，还需要在正文中添加如下代码： 　　　　<p class=red> 　　2，ID选择符 　　　　先学习一下什么是ID，我也不知道，不过书上写着：在HTML中，需要唯一标识一个元素时，就会赋予它一个ID标识，以便在对整个文档进行处理时能够很快地找到这个元素。而ID选择符则用来对这个单一元素定义单独的样式

一、前端编程 1. 你能描述一下渐进增强和优雅降级之间的不同吗? 答: 定义: 优雅降级（graceful degradation): 一开始就构建站点的完整功能，然后针对浏览器测试和修复 渐进增强（progressive enhancement): 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。 都关注于同一网站在不同设备里不同浏览器下的表现程度 区别: “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站. 而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 “渐进增强”观点则认为应关注于内容本身。请注意其中的差别： 我甚至连“浏览器”三个字都没提 。 理解: "优雅降级"就是首先完整地实现整个网站,包括其中的功能和效果. 然后再为那些无法支持所有功能的浏览器增加候选方案, 使之在旧式浏览器上以某种形式降级体验却不至于完全失效. "渐进增强"则是从浏览器支持的基本功能开始, 首先为所有设备准备好清晰且语义化的html及完整内容, 然后再以无侵入的方法向页面增加无害于基础浏览器的额外样式和功能. 当浏览器升级时, 它们会自动呈现并发挥作用. 　　参考自: 渐进增强、优雅降级 渐进增强和优雅降级 2. 浏览器兼容问题: 问题1

background:-ms-radial-gradient(circle,rgba(0, 0, 0, 0.2),rgba(0,0,0,0)); /* IE 10*/ background: -webkit-radial-gradient(circle,60% 55%, closest-side,rgb(0,0,0,0.28),rgb(0,0,0,0)); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(circle,60% 55%, closest-side,rgb(0,0,0,0.28),rgb(0,0,0,0)); /* Opera 11.1 - 12.0 */ background: -moz-radial-gradient(circle,60% 55%, closest-side,rgb(0,0,0,0.28),rgb(0,0,0,0)); /* Firefox 3.6 - 15 */ background: radial-gradient(circle,rgb(0,0,0,0.20),rgb(0,0,0,0)); /* 标准的语法 */ 坑最多的就是IE, radial-gradient 前面需要加上 -ms-,不然别的方法都不能实现,网上也没有这种加法,还是自己研究出来的.....这个只能兼容IE10以上的