文章目录
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%); |