平凡前端之路_07.CSS3的视觉效果

CSS3的视觉效果

CSS3 新增圆角、盒子阴影、半透明、文字效果、渐变背景等视觉效果。

圆角 - border-radius

使用 CSS3 border-radius 属性，可以给元素制作 “圆角”。

属性	描述
border-top-left-radius	定义了左上角的圆角
border-top-right-radius	定义了右上角的圆角
border-bottom-right-radius	定义了右下角的圆角
border-bottom-left-radius	定义了左下角的圆角

/** border-radius 属性所有四个边角属性的缩写，可以有1到4个值（以左上方向逆时针）。 */
border-radius: [top-left] [top-right] [bottom-right] [bottom-left];
border-radius: [top-left] [top-right & bottom-left] [bottom-right];
border-radius: [top-left & bottom-right] [top-right & bottom-left];
border-radius: [all];

border- * - * -radius & border-radius 可能的值	描述
length	定义角的形状。
%	使用%定义角的形状。

/** border-*-*-radius 和border-radius可以指定水平半径、垂直半径的圆角程度 */
border-top-left-radius: 15px 50px; 
border-radius: 15px / 50px;
/**
第一个值是水平半径，第二个是垂直半径。如果省略第二个值，第二个值复制第一个的值。

水平半径的百分比是指边框的宽度的百分比，而垂直半径的百分比是指边框的高度的百分比。
*/
border-radius: 15px / 50px;
/**等价于*/
border-radius: 15px 15px 15px 15px / 50px 50px 50px 50px;

border-radius 可以通过8个数值，任意指定任意角的水平半径和垂直半径。

---

盒子阴影 - box-shadow

使用 CSS3 box-shadow 属性，可以给元素添加一个或多个阴影。

box-shadow: offset-x offset-y [blur-radius] [spread-radius] [color] [inset];

阴影并不占据空间，不影响布局。

多个阴影以逗号分隔，第一个阴影在最上面。

borer-radius圆角会影响元素阴影。

值	描述
offset-x	必需的。X轴阴影偏移量。允许负值。
offset-y	必需的。Y轴阴影偏移量。允许负值。
blur-radius	可选。阴影模糊半径。只能是正值。
spread-radius	可选。阴影扩展。允许负值。
color	可选。阴影颜色。
inset	可选。投影方式。从外层阴影（默认）改变为内侧阴影。

inset 可以写在参数的第一个或最后一个，其它位置是无效的。

外阴影会在元素背景之下，内阴影会在边框之下背景之上。

当设置内阴影（inset）时，x-offset水平偏移量为负值时，方向是右侧，为正值时，方向是左侧；y-offset垂直偏移量为负值时，方向是底部，为正值时，方向是顶部。

---

半透明 - opacity

使用 CSS3 opacity 属性，可以给元素添加透明度。

opacity值	描述
number	指定不透明度。从0.0（完全透明）到1.0（完全不透明）

约束在[ 0.0 - 1.0 ]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。

/*兼容与支持*/
eg:
.E{
	filter:alpha(opacity=50);  	/* IE8 and earlier */
	-khtml-opacity: 0.5;  		/* earlier Safari */
	  -moz-opacity: 0.5;  		/* earlier Mozilla */
		   opacity: 0.5;
}

文字效果

文字阴影 - text-shadow

使用 CSS3 text-shadow 属性，可以给文字添加一个或多个阴影。

text-shadow: offset-x offset-y [blur-radius] [color];

阴影并不占据空间，不影响布局。

多个阴影以逗号分隔，第一个阴影在最上面。

text-shadow可能的值	描述
offset-x	必需的。X轴阴影偏移量。允许负值。
offset-y	必需的。Y轴阴影偏移量。允许负值。
blur-radius	可选。阴影模糊半径。只能是正值。
color	可选。阴影颜色。

文字溢出 - text-overflow

使用 CSS3 text-overflow 属性，可以指定如何显示文本溢出内容。

text-overflow可能的值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。只在 Firefox 下有效.

/** 单行文本溢出修剪*/
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/** 多行文本溢出修剪，2， 3， 4*/
.text-multi-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*2， 3， 4*/
  -webkit-box-orient: vertical;
}

---

渐变背景

使用 CSS3 渐变 gradients，可以让两个或多个指定的颜色之间显示渐变的过渡。

渐变 - gradient 是数据类型，是一种特别的image数据类型。可以使用background-image、border-image设置，可叠加设置多个；

CSS3 定义了两种类型的渐变 - gradients。

线性渐变 - linear-gradient

线性渐变由方向定义渐变轴，必须至少定义两种颜色结点，才有颜色渐变过渡效果。

background-image: linear-gradient([direction], [color-stop1], [color-stop2], ...);          

值	描述
direction	用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,…	用于指定渐变的起止颜色。

direction可能的值	[标准]	[-webkit-]	[-moz-] [-o-]
从下到上	to top	bottom	top
从上到下	to bottom	top	bottom
从左到右	to right	left	right
从右到左	to left	right	left
从右上到左下	to bottom left	top right	bottom left
从左下到右上	to top right	bottom left	top right

/* 兼容与支持 */
eg:
 	background-image: -webkit-linear-gradient(left, red , yellow); /* Safari 5.1 - 6.0 */
 	background-image: 	 -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 - 15 */
    background-image: 	   -o-linear-gradient(right, red, yellow); /* Opera 11.1 - 12.0 */
    background-image: 		  linear-gradient(to right, red , yellow); 

direction使用角度	[标准]	[-webkit-] [-moz-] [-o-]
从下到上	0 deg	90deg
从上到下	180deg	-90deg / 270deg
从左到右	90deg	0deg
从右到左	-90deg / 270deg	180deg
从右上到左下	-135deg / 225deg	-135deg / 225deg
从左下到右上	45deg	45deg

/* 兼容与支持 */
eg:
 	background-image: -webkit-linear-gradient(0deg, red , yellow); /* Safari 5.1 - 6.0 */
 	background-image: 	 -moz-linear-gradient(0deg, red, yellow); /* Firefox 3.6 - 15 */
    background-image: 	   -o-linear-gradient(0deg, red, yellow); /* Opera 11.1 - 12.0 */
    background-image: 		  linear-gradient(90deg, red, yellow); 

色标 (color-stop)

由一个color值组成，并且可以跟随着一个可选的终点位置——可以是一个百分比值或者是沿着渐变轴的length。

eg:
	background-image: linear-gradient(to right, red 10%, yellow 120px); 
	/**从左到右渐变，红色从最左边到10%停止，从10%到120px，红色到黄色渐变，黄色从120px到最右边停止*/

未设置位置时默认情况下颜色均匀分布。

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小, 则该色标的位置值会被设置为它前面所有色标位置值的最大值。

重复的线性渐变 - repeating-linear-gradient

eg:
	background-image: repeating-linear-gradient(to right, red 20%, yellow 80%);
	/*从左到右渐变，红色从20%到黄色80%渐变，沿着渐变轴正负方向重复*/

	background-image: repeating-linear-gradient(to right, red, red 20%, yellow 80%, yellow 100%);
	/*等价于*/
	background-image: linear-gradient(to right, red 20%, yellow 80%); 
	/**从左到右渐变，红色从最左边到20%停止，从20%到80%，红色到黄色渐变，黄色从80%到最右边停止，重复*/

径向渐变 - radial-gradient

径向渐变由中心定义渐变轴。必须至少定义两种颜色结点，才有颜色渐变过渡效果。可以指定渐变的中心、形状、大小。

background-image: radial-gradient([position] [shape] [size], color-stop1, color-stop2, ...);  

position可能的值	描述
center（默认）	设置中间为径向渐变圆心。
top	设置顶部为径向渐变圆心。
bottom	设置底部为径向渐变圆心。

shape可能的值	描述
ellipse (默认)	指定椭圆形的径向渐变。
circle	指定圆形的径向渐变

size可能的值	描述
farthest-corner (默认)	指定径向渐变的半径长度为从圆心到离圆心最远的角。
closest-side	指定径向渐变的半径长度为从圆心到离圆心最近的边。
closest-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角。
farthest-side	指定径向渐变的半径长度为从圆心到离圆心最远的边。

radial-gradient的color-stop的可选的终点位置不允许负值。

重复的径向渐变 - repeating-radial-gradient

eg:
	background-image: repeating-radial-gradient(red 20%, yellow 80%);
	/*中间为径向渐变圆心，红色从20%到黄色80%渐变，沿着渐变轴正负方向重复*/

CSS 知识题

题目	答案
css常用长度单位	px(pixel)、em、rem(root em)、vw(viewpoint width)、vh(viewpoint height)、vmin、vmax、pt(point)。
当max-width在比width小，元素的宽度	元素的宽度值为 max-width，不论 !important 。
line-height:1.5和line-height:150%的区别	当父子继承时有区别–line-height设置:1.5会直接继承给子元素即子元素line-height:1.5,设置150%则是计算line-height,将值继承给子元素即子元素line-height不为150%，而是一个计算好的值。
文字两边对齐	text-align: justify;
改变 input 焦点光标的颜色	caret-color:red / color: red;/ E{color: red} E::first-line{color: blue }
选择5-10的子元素	E:nth-child(n+5):nth-child(-n+10) {}
设置鼠标指针事件的属性	pointer-events
设置鼠标指针显示的类型、形状	cursor
设置文档中被选中高亮部分设置样式	E::selection{}
背景对半颜色	background: linear-gradient(to left, red 50%, white 50%);