CSS
文章平均质量分 70
ssisse
这个作者很懒,什么都没留下…
展开
-
html中 left,right,top,bottom图示
图转自:http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html转载 2016-06-19 16:36:04 · 2994 阅读 · 0 评论 -
CSS颜色---RGB、HSL、Hex 网页色彩码
網頁使用到的色彩標示方法中,從古早時期大家都在用的16進位碼(#000000)、RGB色值標示、HSL色彩標示,其中網頁設計師最常使用的16進位色碼標示法,設計師究竟了解多少?而16進位碼又是如何計算色彩的呢?有沒有辦法直接腦袋就把色彩算出來?HSL色彩該如何運用與記憶?有沒有什麼秘訣或小技巧?一連串的問題就跟著Amos繼續看下去。先來說說RGB色彩 ( RGB color )RG转载 2016-08-18 10:50:41 · 1481 阅读 · 0 评论 -
CSS3d动画 animation 属性
CSS3 animation 属性定义和用法animation 属性是一个简写属性,用于设置六个动画属性:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction注释:请始终规转载 2016-08-27 10:01:19 · 2259 阅读 · 1 评论 -
CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Opera(Opera浏览器)、Trident转载 2016-07-14 20:15:49 · 943 阅读 · 0 评论 -
CSS3 HSL colors
HSL是一个选择颜色的很直观的方法。如果你需要“再暗一点点儿” 或 “再亮一点点儿”,使用十六进制组合会颇麻烦吧。幸运的是,通过HSL,它就是仅仅一个简单的数字改变。HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的转载 2016-08-18 10:48:45 · 504 阅读 · 0 评论 -
CSS基础:z-index详解
CSS基础:z-index详解概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系的比较1. 对于同级元素,默认(或position:static)情况下文档流后面的元素会覆盖前面的。2. 对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-inde转载 2016-06-03 20:44:47 · 290 阅读 · 0 评论 -
CSS text-align 和 vertical-align 属性
CSS text-align 属性定义和用法text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。可能的值值描述le转载 2016-09-10 10:17:54 · 3207 阅读 · 0 评论 -
CSS border-collapse 属性
CSS border-collapse 属性定义和用法border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。默认值:separate继承性:yes版本:CSS2JavaScript 语法:object.转载 2016-08-30 11:03:58 · 565 阅读 · 0 评论 -
30个最常用css选择器解析
30个最常用css选择器解析你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题。掌握了它们,才能真正领略css的巨大灵活性。1. ** { margin: 0; padding: 0; }星状选择符会在页面上的每一个元转载 2016-07-22 14:03:01 · 315 阅读 · 0 评论 -
CSS3 Transition
本文转自:http://www.w3cplus.com/content/css3-transitionCSS3 TransitionW3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属转载 2016-05-29 17:41:47 · 337 阅读 · 0 评论 -
使用CSS3 backface-visibility:hidden;属性制作翻转动画效果
使用CSS3 backface-visibility属性我们可以制作出许多有趣的动画效果。当你翻转一个元素的时候,你看到的是什么?通常情况下,我们应该看到的是元素的背面,这是正常的情况,但是有时候我们希望翻转一个元素后看到的是另一个元素。通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出转载 2016-07-12 14:47:54 · 6967 阅读 · 0 评论 -
内联元素和块级元素
div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。其实你需要知道的行内元素就是 span 和 a ,其他的行内元素,比如 strong、b、font 这些都是转载 2016-07-15 14:20:39 · 298 阅读 · 0 评论 -
CSS background 属性
CSS background 属性定义和用法background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性:background-colorbackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment转载 2016-05-29 21:18:14 · 973 阅读 · 0 评论 -
CSS box-reflect倒影效果
语法:box-reflect:none | ? ? = above | below | left | right = | = none | | | | | 默认值:none适用于:所有元素继承性:无动画性:否计算值:指定值取值:none:无倒影 Demo: 简单图片倒影 See转载 2016-07-17 17:04:19 · 439 阅读 · 0 评论 -
CSS3动画 @keyframes
CSS3 @keyframes 规则定义和用法通过 @keyframes 规则,您能够创建动画。创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100转载 2016-08-27 10:09:28 · 717 阅读 · 0 评论 -
CSS Transform变化 和 transform-origin
CSS3 transform 属性定义和用法transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。默认值:none继承性:no版本:CSS3JavaScript 语法:object.style.transform="转载 2016-08-27 20:02:03 · 2171 阅读 · 0 评论 -
CSS border 属性及用border画各种图形
CSS border 属性定义和用法border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性:border-widthborder-styleborder-color如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。默认值:not specifie转载 2016-08-28 10:58:10 · 10163 阅读 · 0 评论 -
CSS display 属性
CSS display 属性定义和用法display 属性设置元素如何显示。语法:Object.style.display=valuePossible Values值描述none此元素不会被显示。block此元素将显示为块级元素,此元素前后会带有换行符。i转载 2016-07-21 16:00:24 · 314 阅读 · 0 评论 -
CSS overflow 属性
CSS overflow 属性定义和用法overflow 属性规定当内容溢出元素框时发生的事情。可能的值值描述visible默认值。内容不会被修剪,会呈现在元素框之外。hidden内容会被修剪,并且其余内容是不可见的。scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。auto如果内转载 2016-07-03 20:54:56 · 496 阅读 · 0 评论 -
CSS3的appearance属性-改变任何元素的浏览器默认风格
使用CSS3的appearance属性改变任何元素的浏览器默认风格其实我们可以使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果,需要的朋友可以了解下大家都知道每个浏览器对HTML元素渲染都不一样,比如说“button”,在chrome和ff转载 2016-06-23 17:30:58 · 1041 阅读 · 0 评论 -
CSS font-smoothing
CSS font-smoothing用于设置字体的抗锯齿或光滑度的属性。有3个值:1. “none” 用于小像素的文本;2. “subpixel-antialiased” 浏览器默认;3. “antialiased” 反锯齿,使文字看起来更清晰。转载 2016-07-17 16:40:22 · 467 阅读 · 0 评论 -
CSS 选择器参考手册
CSS 选择器参考手册CSS3 选择器在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)选择器例子例子描述CSS.class.intro选择 class="intro" 的所有转载 2016-09-01 08:33:30 · 390 阅读 · 0 评论 -
filter的alpha透明度和opacity透明度区别
filter的alpha透明度与opacity透明度 相同点:都是值为0表示完全透明,值为1表示完全不透明不同点:alpha可以应用于元素特定的属性(比如背景、边框、文字),且alpha只作用于这个属性。而opacity会作用于某元素及该元素下的所有属性。原创 2016-08-31 17:05:21 · 5612 阅读 · 0 评论 -
CSS :hover和:active区别
:hover选择器:当鼠标悬停在所指定的元素上时所使用的样式;:focus选择器:当元素获得光标焦点时使用的样式,主要用在文本框输入文字时使用;原创 2016-09-01 09:26:07 · 2031 阅读 · 0 评论 -
CSS3 background-clip 属性
CSS3 background-clip 属性定义和用法background-clip 属性规定背景的绘制区域。默认值:border-box继承性:no版本:CSS3JavaScript 语法:object.style.backgroundClip="content-box"语法background-clip: border-box|padding-box|content-bo转载 2016-08-26 10:39:37 · 463 阅读 · 0 评论 -
CSS text-fill-color属性
CSS : text-fill-color属性语法:text-fill-color:默认值:transparent适用于:所有元素继承性:有动画性:是计算值:指定值取值::指定文字的填充颜色。说明:检索或设置对象中的文字填充颜色。若同时设置 和 color '>, 定义的颜色将覆盖 col转载 2016-08-26 10:46:00 · 12404 阅读 · 0 评论 -
优雅降级 与 渐进增强
优雅降级与渐进增强何为渐进增强、优雅降级?通过使用某些技术,当浏览器支持相应功能时文档会得到增强(渐进增强),而当浏览器不支持相应功能时,文档被退化(优雅降级)。但不支持相应功能的浏览器也会获得同一文档的具备相同信息量但却不一样的视图。Web开发人员目前的任务就是开发出具有不唐突性,也就是能够根据浏览器能力实现渐进增强或平稳退化的Web应用来。常用两种策略:转载 2016-09-05 21:37:12 · 1285 阅读 · 0 评论 -
CSS ::selection伪类选择器
CSS ::Selection大家都知道浏览器对选中的文本默认样式都是统一的,Windows下是一个深蓝色的背景,白字的前景,而在Mac下是一个淡蓝色背景,白色字体,就如上图所展示的一样,自从有了这个“::selection”选择器后,我们在部分浏览器中可以设置你所需要的样式,下面就让我来告诉大家如何使用这个“::selection”来改变在浏览器中选中文本后的背景色与前景色。转载 2016-07-18 16:00:58 · 2087 阅读 · 2 评论 -
CSS text-transform 属性
CSS text-transform 属性定义和用法text-transform 属性控制文本的大小写。说明这个属性会改变元素中的字母大小写,而不论源文档中文本的大小写。如果值为 capitalize,则要对某些字母大写,但是并没有明确定义如何确定哪些字母要大写,这取决于用户代理如何识别出各个“词”。默认值:none转载 2016-08-27 09:57:58 · 1110 阅读 · 0 评论 -
CSS3中的变形与动画(上)【2D】 Transform 和 Transition
本文转自 http://www.imooc.com/learn/33变形--旋转 rotate()旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。如下图所示:HTML代码:转载 2016-04-24 21:09:17 · 630 阅读 · 0 评论 -
CSS position:sticky
position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。 设置了sticky的元素,在屏幕范围(转载 2016-09-07 20:17:37 · 960 阅读 · 0 评论 -
CSS display:inline-block
display:inline; 内联元素,简单来说就是在同一行显示。display:block; 块级元素,简单来说就是就是有换行,会换到第二行。display:inline-block; 就是在同一行内显示的块级元素(具有块状元素的特征,可以设置宽度和高度)。说概念太模糊,来个真实案例吧。链接一链接一A默认就是一行,所以inline用在这里是废的。宽高度设置也是废转载 2016-09-08 09:19:32 · 235 阅读 · 0 评论 -
(转载) CSS height 和 line-height 的区别
height表示垂直高度,line-height表示文本行高,也就是从文字顶部到底部的距离,试下这个就可以看到区别了:.test1{line-height:20px;background-color:red;}.test2{height:20px;background-color:green;}test1test1test2test2可以看到红色背景高度为100p转载 2016-09-08 21:33:08 · 426 阅读 · 0 评论 -
CSS3 @media
CSS3 @media 定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。CSS 语法@media mediatype and|转载 2016-08-26 10:17:22 · 649 阅读 · 0 评论 -
CSS cursor 属性
HTML DOM cursor 属性定义和用法cursor 属性规定所显示的指针(光标)的类型。语法:cursor:[ [ ]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | verti转载 2016-07-13 12:14:53 · 752 阅读 · 0 评论 -
transitionend 事件
transitionend 事件定义和用法transitionend 事件在 CSS 完成过渡后触发。注意: 如果过渡在完成前移除,例如 CSS transition-property 属性被移除,过渡事件将不被触发。更多关于 CSS 过渡,请查看我们的 CSS3 过渡。语法object.addEventListener("webkitTra转载 2016-09-13 09:00:35 · 1689 阅读 · 0 评论 -
CSS3 display:box详解
CSS3 display:box详解display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-)转载 2016-09-13 10:50:49 · 428 阅读 · 0 评论 -
CSS user-select
user-select语法:user-select:none | text | all | element默认值:text适用于:除替换元素外的所有元素继承性:无动画性:否计算值:指定值取值:none:文本不能被选择text:可以选择文本all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,转载 2016-08-24 10:19:18 · 329 阅读 · 0 评论 -
CSS content 属性以及 :before和 :after 伪元素
CSS content 属性定义和用法content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。说明该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。可能的值值描述none转载 2016-08-24 11:11:39 · 2463 阅读 · 0 评论 -
CSS outline属性以及和border属性的区别
本文转自:http://blog.163.com/wangzhenbo85%40126/blog/static/101363282201332935254416/在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。outline 能告诉用户那一个可以激发事件的htm转载 2016-05-11 17:12:15 · 11924 阅读 · 0 评论