::selection作用: 当使用鼠标选择文本时,改版被选中文本的背景色和前景色.(默认情况下,window中背景色是深蓝色,前景色是白色.) ::selection语法: /*Mozilla Firefox*/ ::-moz-selection { background: 颜色值: color:颜色值: } /*Webkit,Opera9.5+,Ie9+*/ ::selection { background: 颜色值: color:颜色值: } 注意:::selection只能设置backg…

最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性border-radius.box-shadow.border-image 边框圆角 border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ 边框阴影 -moz-box-shadow: 10px 10px 5px #888888; /*…

大家都知道浏览器对选中的文本默认样式都是统一的,Windows下是一个深蓝色的背景,白字的前景,而在Mac下是一个淡蓝色背景,白色字体,就如上图所展示的一样,自从有了这个“::selection”选择器后,我们在部分浏览器中可以设置你所需要的样式,下面就让我来告诉大家如何使用这个“::selection”来改变在浏览器中选中文本后的背景色与前景色. ::selection使用语法: /*Webkit,Opera9.5+,Ie9+*/ ::selection { background: 颜色值:…

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本).浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,效果如下图所示: 从上图中可以看出,用鼠标选中“专注IT.互联网技术”.“纯干货.学以致用”.“没错.这是免费的”这三行文本中,默认显示样式为:蓝色背景.白色文本. 有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用.不过在Firefox浏览器还需要添加前缀.…

只在chrome的少数版本的浏览器中有实现,兼容性差,不适宜应用. filter语法: elm { filter: none | <filter-function > [ <filter-function> ]* } 取值说明: filter-function:有以下值可选 grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色相旋转 invert反色 opacity透明度 brightness亮度 contrast对比度 blur…

clip语法: .selector { clip: rect | auto | inherit } 注意:clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用 取值: rect:通过设置四个点来进行裁切,语法下面介绍 auto:默认,和不进行裁切的效果一致 inherit:继承父元素的裁切属性 clip: rect(<top>, <right>, <bottom>, <left>); 通过设置距离上…

calc()语法: elem{ width:calc( 50% -2px ); } 取值说明: calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的width属性 calc()能做什么: calc()可以通过动态的计算来得到元素的宽度或者高度. 例如:width:calc(50% - 2px).当为元素设置了2px的边框时,通过这样的计算就可以避免因超出而折行. 可以使用 + - * / 等运算符来进行计算 注意:表达式中有“+”和“-”时,其前后必须…

media语法: <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 上面的media语句表示的是:当屏幕宽度小于或等于600px,调用small.css样式表来渲染Web页面. 含义: screen:指的是一种媒体类型:还可以选择all.print.TV等. and:关键词,与其相似的还有not,only. max-widt…

box-sizing语法: box-sizing : content-box || border-box || inherit 参数取值: content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+conten…

background-image语法: background-image: url1,url2,...,urlN; 通过“,”分隔N张背景图片,background的所有其它属性需要配合该属性进行设置,如下: background-repeat: repeat1,repeat2,...,repeatN; background-position: position1,position2,...,positionN; background-size: size1,size2,...,sizeN; b…