第14章 使用CSS进行增强

2018-03-01 18:20:00 《HTML5与CSS3基础教程》笔记 阅读: 114 评论:

[TOCM]

为元素创建圆角

  • 创建四个相同的圆角:
    这步可选,输入:-webkit-border-radius: r; ,r是圆角半径。
    输入:border-radius: r; r和第一步值相同
    (将鼠标放在图形上可以查看属性,下面的都可以)

  • 创建一个圆角:
    这步可选,输入:-webkit-border-x-y-radius: r; x和y为方位,可以取top、bottom、left、right
    输入:border-x-y-radius: r; r和第一步值相同
    重复使用上面属性即可创建多个圆角。

  • 创建椭圆圆角:
    这步可选,输入:-webkit-border-radius: x/y; x是水平方向的半径,y是竖直方向的半径
    输入:border-radius: x/y; xy和第一步值相同
    重复使用上面属性即可创建多个椭圆圆角。

  • 创建圆形:
    这步可选,输入:-webkit-border-radius: r; r取元素高度的一半,一半用百分比为单位(50%)
    输入:border-radius: r; r和第一步值相同

为元素添加阴影

输入-webkit-box-shadow: x-offset(水平偏移) y-offset(竖直偏移) blur-radius(模糊半径) spread() color(颜色);
输入box-shadow::值同第一步
添加内阴影:
输入-webkit-box-shadow: x-offset(水平偏移) y-offset(竖直偏移) blur-radius(模糊半径) spread() color(颜色) inset;
输入box-shadow:值同第一步

添加多重阴影:

输入-webkit-box-shadow: x-offset(水平偏移) y-offset(竖直偏移) blur-radius(模糊半径) spread() color(颜色) (inset);
输入逗号,重复第一步的各个值
输入box-shadow:值同第一、二步

取消阴影:输入-webkit-box-shadow: none; 和 box-shadow: none;

使用多重背景

输入background: 属性,为元素添加备用背景
输入background: 属性1,属性2, .. , 属性n; 为元素添加多重背景
这里的属性是用空格隔开的属性值表

使用渐变背景

创建备用颜色, 同上

定义线性渐变

输入background: linear-gradient(to x, color-1 loc-1, color-2 loc-2, ..., color-n loc-n); (n>=2), loc可以省略, 浏览器自动指定

定义径向渐变

输入background: radial-gradient(circle或ellip或跳过(跳过则需指定size), size(可以跳过,默认最远角), pos(渐变中心位置, 可以是 at d(方位) 或 at x y), color-1 loc-1, color-2 loc-2, ..., color-n loc-n); (n>=2), loc可以省略, 浏览器自动指定

可以定义多重渐变,每个定义之间用逗号隔开

修改元素的不透明度

格式:opacity: a(不透明程度,0-1);

生成内容

使用:before和:after可以为元素添加效果。

阅读更多

使用拼合图像

将多个尺寸相同的图像拼合为一个图像文件,使用的时候根据 background-position 进行定位即可。


功能
最新评论