css学习记录

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%，生成自适应的圆形