CSS3初体验

作者: 匿名用户404 | 来源:发表于2017-08-14 01:02 被阅读64次

    CSS3是个啥

    CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。

    CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

    CSS3是在CSS的接触上增加了很多新的特性,与低版本的CSS并不冲突。

    CSS3文本

    text-overflow

    1.clip: 隐藏超出文本
    2.ellipsis: 超出部分使用省略号
    例子(超出文本内容使用省略号代替)
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

    word-wrap

    word-wrap 属性允许长单词或 URL 地址换行到下一行
    1.normal: 只在允许的断字点换行
    2.break-word: 在长单词或 URL 地址内部进行换行

    word-break

    word-break 属性规定自动换行的处理方法
    1.normal 使用浏览器默认的换行规则。
    2.break-all 允许在单词内换行
    3.keep-all 只能在半角空格或连字符处换行

    white-space

    white-space 属性设置如何处理元素内的空白
    1.normal 默认。连续空白会被浏览器忽略
    2.pre 空白会被浏览器保留。
    3.nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
    标签为止
    4.pre-wrap 保留空白符序列,但是正常地进行换行
    5.pre-line 合并空白符序列,但是保留换行符
    6.inherit 规定应该从父元素继承 white-space 属性的值

    text-shadow

    text-shadow: 颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)
    text-shadow: x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)
    可以设置偏移,颜色,阴影大小

    CSS3 边框

    CSS在很大程度上拓展了border的样式,让我们可以做出更加丰富的效果

    border-radius

    圆角是做网页永远绕不过的话题,以前基本是通过背景图片做的,有了CSS3后简单属性搞定,我们可以通过border-radius设置元素的圆角半径
    order-radius是缩写格式,其实border-radiusborder属性一样,还可以把各个角单独拆分出来

    box-shadow

    box-shadow属性至多有6个参数设置
    1.阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值inset,就是将外阴影变成内阴影
    2.X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边
    3.Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部
    4.阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊
    5.阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小
    6.阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样

    box-sizing

    这个属性多少和边框也相关,传统的盒模型width就是指内容区域宽度,和padding、border没有关系,但是这在布局上带来一定的困难
    box-sizing可以改变盒模型
    1.content-box:标准盒模型
    2.border-box:width = content width + paddingLeft + borderLeft + paddingRight + borderRight

    CSS3 背景

    在CSS3之前我们对背景图片的控制极为有限,只能决定其来源、位置、重复,CSS3开辟了一篇新天地

    background-size

    在 CSS3中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片,以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度
    1.length:设置背景图像的高度和宽度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto
    2.percentage: 以父元素的百分比来设置背景图像的宽度和高度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto
    3.cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中
    4.contain: 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

    background-origin

    background-origin 属性规定 background-position 属性相对于什么位置来定位
    1.padding-box: 背景图像相对于内边距框来定位
    2.border-box: 背景图像相对于边框盒来定位
    3.content-box: 背景图像相对于内容框来定位
    如果背景图像的 background-attachment 属性为fixed,则该属性没有效果

    CSS3 渐变(Gradient)

    CSS3渐变分为liner-gradientradial-gradient

    线性渐变

    在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴
    linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)
    W3C标准线性渐性语法包括三个主要属性参数:

    第一个参数指定了渐变的方向,同时决定了渐变颜色的停止位置。这个参数值可以省略,当省略不写的时候其取值为to bottom

    在决定渐变的方向主要有两种方法:
    1.angle:通过角度来确定渐变的方向。0度表示渐变方向从下向上,90度表示渐变方向从左向右。如果取值为下值,其角度按顺时针方向旋转
    2.关键词:通过关键词来确定渐变的方向。比如to top、to right、to bottom和to left
    这些关键词对应的角度值,除了使用to top、top left之外,还可以使用top left左上角到右下角、top right左上角到右下解等。

    第二个和第三个参数,表示颜色的起始点和结束点。可以在插入多个颜色值

    多色线性渐变

    在实际中,渐变不仅仅是只有两种颜色,会有多色
    .toLeft {
    background-image:-webkit-linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
    background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
    }

    径向渐变

    CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。
    radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);

    CSS3 过渡和动画

    过渡

    在CSS3引入transition之前css没有时间轴,所有的状态变化都是瞬间完成
    div{
    transition: 1s;
    }

    指定属性

    我们还可以指定transition适用的属性,比如只适用于height
    transition: 1s height;
    这样一来,只有height的变化需要1秒实现,其他变化(主要是width)依然瞬间实现,在同一行transition语句中,可以分别指定多个属性

    delay

    但是,这样一来,height和width的变化是同时进行的,跟不指定它们没有差别,我们希望,让height先发生变化,等结束以后,再让width发生变化。实现这一点很容易,就是为width指定一个delay参数
    transition: 1s height, 1s 1s width;
    上面代码指定,width在1秒之后,再开始变化,也就是延迟(delay)1秒
    delay的真正意义在于,它指定了动画发生的顺序,使得多个不同的transition可以连在一起,形成复杂效果

    animation

    transition 比较简单,animation可以帮我们实现复杂的动画,使用animation我们首先需要定义动画过程,也就是关键帧
    @keyframes rainbow {
    0% { background: #c00; }
    50% { background: orange; }
    100% { background: yellowgreen; }
    }
    rainbow效果一共有三个状态,分别为起始(0%)、中点(50%)和结束(100%)。如果有需要,完全可以插入更多状态,值是每个状态下的属性值
    定义了关键帧之后就可以给DOM元素绑定动画了,和事件很像
    div:hover {
    animation: 1s rainbow;
    }
    当鼠标悬停在div元素上时,会产生名为rainbow的动画效果,持续时间为1秒,默认情况下,动画只播放一次。加入infinite关键字,可以让动画无限次播放
    animation: 1s rainbow infinite;
    也可以指定动画具体播放的次数,比如3次
    animation: 1s rainbow 3;

    CSS3 变形

    CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性,在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
    transform : none | <transform-function> [ <transform-function> ]*
    transform中使用多个属性时却需要有空格隔开,可用于内联(inline)元素和块级(block)元素

    旋转

    可以通过rotate使元素旋转一定的度数
    transform:rotate(30deg);
    1.旋转是顺时针的
    2.旋转之后元素仍占据原来位置,实际上所有的transform都是这样,缩放、位移等都不会改变元素占据的位置
    3.元素旋转的的基点默认是中心,可以通过transform-origin属性改变

    位移

    可以通过translate使元素平移
    transform:translate(x,y); transform:translate(200px,150px);

    扭曲

    可以通过skew使元素扭曲一定的度数,和上面一样也有三中类似的用法

    transform:skew(10deg, 20deg);
    transform:skewX(10deg);
    transform:skewY(10deg);
    transform:skew(10deg);

    CSS3 3D

    CSS3带来了DOM的3D效果,元素需要设置需要设置perspective来激活3D效果,可以通过两种方式实现
    1.在transform属性中使用perspective方法
    transform: perspective( 600px );
    2.直接使用perspective属性
    perspective: 600px;
    perspective属性的值决定了3D效果的强烈程度,可以认为是观察者到页面的距离。值越大距离越远,视觉上的3D效果就会相应的减弱。perspective: 2000px; 会产生一个好像我们使用望远镜看远方物体的3D效果,perspective: 100px;会产生一个小昆虫看大象的效果。

    HTML5 Tricks
    推荐一个学习HTML5的网站,里面有各种HTML5+CSS5写出来的超赞,超神奇的特效。amazing!!!

    相关文章

      网友评论

        本文标题:CSS3初体验

        本文链接:https://www.haomeiwen.com/subject/vgoerxtx.html