css学习记录

来源:互联网 发布:unity3d玻璃材质包 编辑:程序博客网 时间:2024/03/29 16:55

1、浏览器前缀

ie: -ms-

firefox:-moz-

opera: -o-

chrome和safari: -webkit


-webkit是webkit内核

-moz-是firefox Gecko内核,moz代表的是firefox生产厂商Mozilla


浏览器内核: 

  1. 一、Trident内核代表产品Internet Explorer,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

  2. 二、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

  3. 三、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

  4. 4

    四、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。

 

2、边框: 

border-radius: 可以用百分比设置。 比如: border-radius: 50%;


box-shadow: 设置一个或多个阴影

box-shadow: h-shadow v-shadow blur spread color inset;
值描述 h-shadow必需。水平阴影的位置。允许负值。 v-shadow必需。垂直阴影的位置。允许负值。 blur可选。模糊距离。 spread可选。阴影的尺寸。 color可选。阴影的颜色。请参阅 CSS 颜色值。 inset可选。将外部阴影 (outset) 改为内部阴影。

border-image: 边框图片

Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性。

Safari 5 支持替代的 -webkit-border-image 属性。

值描述测试border-image-source用在边框的图片的路径。 border-image-slice图片边框向内偏移。 border-image-width图片边框的宽度。 border-image-outset边框图像区域超出边框的量。 border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

例子: 如何设置半透明边

rgba:是一种css颜色,可以设置不透明度。可以使用百分比来设置

rgba(red, green, blue, alpha)

hsla: 是一种颜色

HSLA(H,S,L,A)

H:
Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:
Saturation(饱和度)。取值为:0.0% - 100.0%
L:
Lightness(亮度)。取值为:0.0% - 100.0%
A:
Alpha透明度。取值0~1之间。
摘录补充: 

HSL色彩空间中,H(Hue):代表色调,S(Saturation):代表饱和度,L(Lightness):代表亮度,(A(Alpha):代表不透明度)。HSL是一种圆柱坐标系,其坐标系图如下:

 

如上图:

H是色度,取值在0度~360度之间,0度是红色,120度是绿色,240度是蓝色。360度也是红色。

S是饱和度,是色彩的纯度,是一个百分比的值,取值在0%~100%,0%饱和度最低,100%饱和度最高

L是亮度,也是一个百分比值,取值在0%~100%,0%最暗,100%最亮。

A是不透明度,取值在0.0~1.0,0.0完全透明,1.0完全不透明。

例子: 如何设置多边框

box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
使用outline-offset可以实现内缝线效果


3、背景

background-size: 规定背景图片的尺寸。如用百分比设置,则为父元素的高度和宽度

background-size: length|percentage|cover|contain;
值描述测试length

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

 percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

 cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

 contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

background-origin: 背景图片的定位区域

background-origin: padding-box|border-box|content-box;
值描述测试padding-box背景图像相对于内边距框来定位。测试border-box背景图像相对于边框盒来定位。测试content-box背景图像相对于内容框来定位。

background-clip:背景的绘制区域:

background-clip: border-box|padding-box|content-box;
值描述测试border-box背景被裁剪到边框盒。测试padding-box背景被裁剪到内边距框。测试content-box背景被裁剪到内容框。

background-image: 可设置多个背景图片

例子: 设置背景图片位置

1)使用background-position:允许背景图片距离任意角的偏移量

background-position: right 20px bottom 10px;

2)使用calc()计算

background-position: calc(100% - 20px) calc(100% - 10px);

浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。

大家在实际使用时,同样需要添加浏览器的前缀

 .elm {/*Firefox*/-moz-calc(expression);/*chrome safari*/-webkit-calc(expression);/*Standard */calc(); }

例2 颜色渐变

背景斜线

background: linear-gradient(#fb3, #58a);


background: #58a;background-image: repeating-linear-gradient(30deg,                    hsla(0,0%,100%,.1),                    hsla(0,0%,100%,.1) 15px,                    transparent 0, transparent 30px);

径向渐变

background: #655;background-image: radial-gradient(tan 30%, transparent 0);background-size: 30px 30px;

加强版: 

repeating-linear-gradient() 和 repeating-radial-gradient()


4、形状

border-radius:可以单独指定垂直或水平的半径,用/隔开  border-radius: 100px/75px  还可用百分比 border-radius:50%/50%,生成自适应的圆形




0 0
原创粉丝点击