RGBA 是 CSS3 中用来控制颜色的单位，分别是 Red Green Blue 三原色和 Alpha 透明度的缩写。 也就是说该属性可以帮助我们在设置颜色的同时，也设置了其透明度。 其实就是 RGB 属性和 opacity 属性的合并写法。 其中 RGB 三个值的设置可以为百分比或者 0~255 的整数值。 A 的值则是 0~1 ，和 opacity 属性一致。 一、应用在背景中： .reg-bgc{ background: rgb(255, 0, 0);}.apl-bgc{ background: rgba(255, 0, 0...
一 CSS文字属性： color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-...
Box-sizing 尽管box-sizing在CSS3中才被引入，其有一个值是border-box，让元素的高和宽包含了填充和边框。 .div { width: 150px; height: 100px; border: 1px solid #ccc; box-sizing: border-box; } Chrome 31+, IE8+, Firefox 31+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.1+等都支持该属性。 z-index和定位 如果元素没有定位属性，如static/absolute/relative/fixed，改属性将被忽略 positio...
[attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属...
CSS--属性 css属性键值对，property：value。主要是一下几类： 文字相关属性：控制文字的字体，颜色，修饰，阴影等属性。 font-family 设置字体类型，如"Arial"、"宋体"等 font-size 设置字体大小，常用度量单位pt和px font-style 设置字体风格，可选值normal, italic和oblique font-weigh 设置字体“重量”，常用值为normal和bold font 综合设置上述各种字体属性 段落相关属性：控制整个段或者div的显示效果，...
flex实现子块的完美居中 方案 父块使用display:flex属性,子块margin自适应即可实现 代码 index.html 块状元素垂直居中(已知高度) *{margin: 0;padding: 0;} .parent{ display: flex; height:500px; background: #03A1FA; } .child{ width: 100px; height: 100px; margin: auto; background: #BB3713; } /* 这个依赖于设置“margin”值为“auto”值，自动获取伸缩容器中剩余的空间。所以设置垂直方向margin值为“au...
在css3中,position的属性值有：inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持。 static 默认值，元素出现在正常的流中，忽略 （TRBL）和z-index的值。请参照下面的例子，div1由于position的值为static，所以top,left 没有起作用. test position static .divPos{ position:static; left:100px; top:100px; } this ...
1、-webkit-tap-highlight-color 移动端页面点击按钮时会发现按钮上会出现一块阴影，设置-webkit-tap-highlight-color:rgba(0,0,0,0);就可以了，将阴影设置成透明就看不见了； 2、-webkit-line-clamp 限制在一个块元素显示的文本的行数，可以配合其他属性设置多行文本溢出省略号的效果 3、-webkit-text-stroke 文字边框，可以配合color:transparent;设置镂空文字的效果 4、-webkit-background-clip 背景...
使用CSS3各个属性实现带有音乐小人的动画，完全不使用JS代码： 注：chrome浏览器效果最佳，最终效果静态图： HTML代码如下： <meta http-equiv="Content-Type" content="text/html; charset=utf-8";> 练习一个小人的动画 I ? Y O U ...
What? image-rendering作为现阶段还处于实验性质中的css属性，他的作用是在浏览器对图片进行比例缩放时，设置其缩放使用的算法，从而来得到我们最终想要的图片结果。而且这个属性可以应用于img，canvas和background-image中。 Note 由于该属性未得到所有浏览器的支持，本文直接在文章里应用该属性，所以阅读此文时请使用最新版本的浏览器 Usage image{ image-rendering:auto;} 其可选的值有： auto使用默认算法，即...
最近在工作中总是要求IE8兼容CSS3属性，在网上搜了搜主要是引入了一个htc文件（ie-css3.htc或者PIE.htc。个人认为这两个文件的作用差不多，具体差异值得探讨） 下载地址：https://github.com/Jesse121/HTML5-CSS3/tree/master/CSS3 支持的主要CSS3属性： 1.border-radius圆角 CSS代码如下： .pie_radius{ width:250px;height:250px; background-color:#34...
一：:before && :after的用法 :before 如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明： .before:before{content:you before; color:red;} me 在这里我们给伪元素 :before 添加了属性 content，并赋值为 you before。我们来看效果： //在指定元素的内容 me 前添加了新内容 you before 我们不难发现这里通过伪元素 :before 添加的新内容区域默认的 display 属性值...
项目中经常有遇到需求半透明的情况，如图片、文字、容器、背景等等，每次都要去翻以前的项目，不甚其烦。现在一次性做个小结，方便自己查阅，也同时分享给大家： 一、 元素容器透明 1 .div{2 opacity: 0.5; /* Firefox、Chorme、Opera等主流浏览器识别 */3 filter:alpha(opacity=50); /* IE6及以上IE浏览器识别 */4 } 说明： 1. opacity:* 取值0-1之间，由全透明向不透明递增，超过1之后默认不透明； 2...
background: url(Plus.png) no-repeat scroll 90% 90% / auto 90%；这个斜杠后面是什么意思 斜杠前面的90% 90%又是什么意思呢 是background-size吗？ 回复讨论(解决方案) background-size，第一个90%是宽，第二个90%是高 “ / ” 后面的背景属性是CSS3新增的，有三个：[ background-size] [background-origin] [background-clip]; background: [background-color] [background-image] [backgrou...
主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性：position、float、overflow、z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 CSS的单位： html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。CSS中的单位是必须要写的，因为它没有默认单位。 绝对单位：1 in=2.54cm=25.4mm=72pt=6pc。各种单位的含义：in：英寸Inches (1 英寸 = 2.54...