重温CSS3

基础不牢,地动山摇!没办法,只能重温“经典”!

1.CSS3边框:border-radius;  box-shadow;  border-image

border-radius:r1,r2,r3,r4;(边框圆角!)

r1~r4:分别为左上角,右上角,右下角,左下角半径(顺时针!缺省时:左上角、右下角相同;右上角,左下角相同)

border-radius: 30px; 

box-shadow: x-shadow y-shadow blur spread color insert;(盒阴影)

x-shadow:必须;水平阴影位置(允许负值);

y-shadow:必须;垂直阴影位置(允许负值);

blur:可选;模糊距离;

spread:可选;阴影大小;

color:可选;阴影颜色;

insert:可选;从外层阴影改变内侧阴影。

    box-shadow: -10px 5px 10px  blue ;

border-image:source slice width outset repeat;图像创建边框,即图片边框!

source:图像的位置:url()

slice:图像边界向内偏移

width:图像边界宽度

outset:边框外部

repeat:是否重复(repeat),拉伸(stretch)或铺满(round)

border: 30px solid orange;
border-image: url('border.png') 30 30 stretch;

  注意:border宽度设置的大一些,易于观察!

2.background:background-size;  background-origin;  background-clip。(background支持多张背景图片定义!)

background-size:背景图片大小(像素或百分比(相对父元素));

background-orgin:背景图片放置的区域位置(content-box,padding-box,border-box

background-clip:指定位置开始裁剪

image.png

示例:

 1 .test1{
 2     width: 150px;
 3     height: 150px;
 4     /* 支持多重背景图片设置 */
 5     background: url('test.jpg') no-repeat,url('border.png');
 6     /* 设置背景图片大小 */
 7     background-size: 50px;
 8     padding: 10px;
 9     margin: 10px;
10     border: 10px dashed gold;
11     /* 可能的值有content-box;padding-box;border-box; */
12     background-origin: padding-box;
13     background-clip: content-box;
14 }

3.CSS3渐变:

与HTML5里面的canvas的渐变一样,这里也分为两种:linear-gradient;radial-gradient

线性渐变:lineal-gradient

默认情况下是:从上到下线性渐变!

 1     /* 1.默认从上到下 */
 2     background: linear-gradient(gold,blueviolet);
 3     /* 2.从左到右 */
 4     background: linear-gradient(to right,gold,blueviolet);
 5     /* 3.右上到左下 */
 6     background: linear-gradient(to left bootom,gold,blueviolet);
 7     /* 4.可以使用多个颜色值 */
 8     background: linear-gradient(red,yellow,green,blue,violet);
 9     /* 5.支持rgba()最后一个参数设置透明度(transparent) 0~1*/
10     background: linear-gradient(to right,rgba(0, 0, 0, 1),rgba(0,0,255,0.1));
11     /* 6.重复线性渐变 */
12     background: repeating-linear-gradient(red,blue 10%,black 30%);

径向渐变:radial-gradient:

默认情况下:颜色结点均匀分布!

语法:background: radial-gradient(center, shape size, start-color, ..., last-color);

shape值:circle或者ellipse;默认是ellipse!

size值:closest-side;farthest-side;closest-corner;farthest-corner

 1     /* 1.默认情况下,颜色结点均匀分布 */
 2     background: radial-gradient(red,blue,violet);
 3     /* 2.不均匀渐变 */
 4     background:radial-gradient(red 20%,blue 30%,violet 30%);
 5     /* 3.设置形状,circle或者默认值ellipse */
 6     background: radial-gradient(circle,red,blue,violet);
 7     /* 4. 设置渐变尺寸大小*/
 8     background: radial-gradient(circle,50% 50%,farthest-side,red,blue,violet);
 9     /* 5.重复径向渐变 */
10     background: repeating-radial-gradient(red 20%,blue 30%,violet 30%)

重复径向渐变的结果图(挺好看的O(∩_∩)O~~):

image.png

4.文本效果:

text-shadow:x-shadow,y-shadow,blur,color;(水平阴影,垂直阴影,模糊距离,阴影颜色)

text-overflow:clip(裁剪文本)或ellipsis(省略号代表)或string(给定字符串代表)

word-wrap:自动换行属性强制换行!

5.@font-face规则:

优势:当把字体文件包含在网站上,用户会自动下载该字体!(原先只能使用用户电脑上已安装的字体!!!

@font-face {
    font-family: firstFont;
    /* IE9只支持.eot字体 */
    src: url('test.ttf'),url('test.eot');
}

6.  2D转换:transform

  • translate():移动(平移)
  • rotate():旋转
  • scale():比例大小(元素增加或减少的大小)
  • skew():倾斜
  • matrix():矩阵;将上面方法合并为一个

 浏览器支持情况:

  1. IE10,现代浏览器;
  2. 某些版本chrome,safari要求前缀-webkit-;
  3. IE9要求前缀-ms-。

transform-Origin:x,y,z;  定义视图放置在x的何处,y的何处,z的何处!(x,y可能的值:left,right,center,length,%;z的可能值:length)

.test1 img{
transform-origin: 20% 30%;
}

 transform:translate(x,y);  往x,y方向上平移给定的参数!

.test1 img{
    transform: translate(20px,20px);
    -webkit-transform: translate(20px ,20px);
    -ms-transform: translate(20px,20px);
}

transform: rotate();    旋转角度为给定参数(正值为顺时针旋转;负值为逆时针旋转!)

.test img{
transform: rotate(30deg);
}

transform: scale(x,y);   x,y长度增大或缩小的比例为给定的参数

.test img{
transform: scale(1.5,2);
}

transform: skew(0deg,30deg);   x轴倾斜0度,y轴倾斜30度。 (若第二个参数为空,则为0;设置负数则为相反方向上倾斜!;可单独设置skewX()和skewY())

.test img{
    transform: skew(0deg,30deg);

}

transform:matrix(n,n,n,n,n,n);  将旋转,缩放,平移,倾斜功能组合!

7. 3D转换

transform-style:flat|preserve-3d; (flat:2D平面显示;preserve-3d:3D空间显示)

perspective:number|none;   (透视效果;number:元素距离图片距离,像素为单位;none:不设置透视,默认值)

perspective-origin:x y;    (透视图在x,y坐标位置)

backface-visibility: visible|hidden;(元素不面向屏幕时,是否可见!)

martix3d(): 16个参数值

translate3d(x,y,z)

scale3D(x,y,z)

rotate3d(x,y,z)

.test1 img{
    transform:translate3d(10px,50px,30px);
    transform:scaleX(1,2,3);
    transform: rotate3d(10deg,20deg,30deg);
    transform-style: preserve-3d;
    perspective: 100;
    perspective-origin: 10% 10%;
}

8. CSS3 transition:过渡!

一种样式效果过渡到另外一种样式效果时,CSS3已经可以做到了!无需flash动画和javascript了!

实现方法:

  1. 添加效果的CSS属性;
  2. 指定效果的持续时间(默认持续时间为0,则不会有"过渡"的效果!!!)

语法:

transition: property duration timing-function delay;

property:指定CSS的name

duration:transition(过渡)效果完成时间消耗

timing-function:转速曲线    

delay:延时多少开始

 1 .test1 img{
 2     /* transition: height 1s,transform 1s; */
 3     transition: height 1s linear 1s,transform 1s linear 1s;
 4     /* 以下相当于:transition:transform 1s linear 1s!!!
 5     transition-property: transform;
 6     transition-duration: 1s;
 7     transition-timing-function: linear;
 8     transition-delay: 1s; */
 9 }
10 img:hover{
11     height: 300px;
12     transform: rotate(360deg);
13 }

timing-function可能取值:

image.png

 9.CSS3 animation:动画

  • animation属性;
  • @keyframes规则。(关键帧,就相当于电影一帧一帧的播放!)
1 @keyframes test{
2     0% {width: 50px;height: 50px;border: 1px solid gold;}
3     50% {width: 150px;height: 150px;border: 1px dashed black;}
4     100% {width: 300px;height: 300px ;border: none;}
5 }
6 .test1 img{
7     animation: test 5s;
8 }

注意:变化发生的时刻:0% 100%相当于关键词"from" "to"

animation语法:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

name:关键帧名字;duration:动画周期时间(默认0);timing-function:转速曲线(默认ease);delay:延迟时间(默认0);iteration-count:播放次数(取值1或infinite;默认1);direction:是否轮流反向播放动画(默认normal);fill-mode:动画不播放时,运用到元素的样式;play-state:指定动画是否正在运行或暂停!(默认running)

transition与animation区别:

  1. transition需要触发条件(比如悬浮,点击等);而animation通常不需要触发条件。
  2. 能用transition,就用transition;否则就用animation。
  3. 同时CSS3支持的transition和animation实现的效果肯定比javascript或其他方法所消耗的资源少!

10.CSS3多列:

column-count:分割的列数

column-gap:列与列之间的间隙

column-rule:column-style-*所有属性的简写

column-rule-style,column-rule-width,column-rule-color:列的边框样式,列的边框宽度,列的边框颜色

column-span:元素跨越的列的数量

column-width:列的宽度

columns:column-width column-count;

div{
    /* column-count: 3; */
    column-width: 300px;
    column-gap: 30px;
    column-rule:solid 3px gold;
    /* column-rule-color: gold;
    column-rule-style: solid;
    column-rule-width: 5px; */
}
h2{
    column-span: all;
}

 11.用户界面:

  • resize:调整尺寸;可能取值:none(默认值;无法调整尺寸),both(可调整宽和高),horizontal(可调整宽度),vertical(可调整高度)

不兼容IE浏览器!

.test1{
    border: 1px solid gold;
    width: 200px;
    height: 200px;
    resize: both;
    overflow: auto;
}

 运行结果:(注意图片上箭头处的区域!)

  • outline-offset:设置轮廓在border边缘外的偏移!

outline与border区别:outline不占空间;

.test1{
    margin: 20px;
    border: 1px solid gold;
    width: 200px;
    height: 200px;
    resize: both;
    overflow: auto;
    outline: 2px solid blue;
    outline-offset: 10px;
}

 当然还有一些用户界面相关的属性:如appearance;

在chrome中测试,只有appearance:button;支持,其它均不支持。

其它如icon,nav-left等所有主流浏览器均不支持!

12. box-sizing(重点!!!)

在标准的W3C盒模型中:width+padding+border=元素实际宽度;height+padding+border=元素实际高度!

这救意味着我们设置width和height时,元素的实际宽度和高度往往要较之更大!

当box-sizing:border-box;时,设置width或height:即是元素实际宽度或高度!(包括了padding+border!!!)

box-sizing:content-box;是默认值,即标准的W3C盒模型:width+padding+border=元素实际宽度!

IE8以上浏览器,现代浏览器支持box-sizing。 不过可能要在前面加上前缀(大公司之间的浏览器"博弈",╮(╯▽╰)╭)

示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>box-sizing</title>
 8     <style>
 9         body{margin: 0;padding: 0;}
10         .test1, .test2, .test3{
11             border: 1px solid gold;
12             width: 200px;
13             height: 200px;
14         }
15         .test2{
16             padding-top: 30px;
17         }
18         .test3{
19             box-sizing: border-box;
20             padding:30px;
21         }
22     </style>
23 </head>
24 <body>
25     <!-- .test1 元素实际高度:height+padding+border=200+0+1*2=202px; -->
26     <div class="test1">this is test1</div>
27     <!-- .test2 元素实际高度: height+padding+border=200+30+1*2=232px     -->
28     <div class="test2">this is test2</div>
29     <!-- .test3 设置了box-sizing:border-box;所以元素实际高度为height,即200px。实际宽度为width:200px; -->
30     <div class="test3">this is test3</div>
31 </body>
32 </html>

13. CSS3 flex box(弹性盒子!)

CSS3中引进的一种新的布局方式。作用:用来适应不同的屏幕大小、不同的设备类型,确保元素有恰当的行为!

弹性盒子组成:flex container(弹性容器)+flex item(弹性子元素)

弹性容器定义:display:flex;或者display:inline-flex;

  • 弹性子元素排列方向:flex-direction: row|row-reverse|column|column-reverse|initial|inherit;  row:(弹性子元素)水平,呈一行排列;row-reverse:相反row排列;column:(弹性子元素)垂直,呈一列排列;column-reverse:相反column排列;initial:最初属性值;inher:继承属性值!     【注意:direction:ltr,rtl(left to right)也可能达到部分类似效果!】
  • 弹性子元素在纵轴上对齐方式:align-items:stretch(默认,拉伸以适应容器);center(中心);flex-start(开头);flex-end(结尾);baseline(基线上)
  • 弹性子元素在横轴上对齐方式:justify-content:flex-start(默认值,开头);flex-end(结尾);center(中心);space-between(子元素平均分布在该行上);space-around(子元素平均分布在该行上,两边留有一半空间!)
  • 弹性子元素超出弹性容器是否换行:flex-wrap:nowrap(默认值,不换行!);wrap(换行);wrap-reverse(换行,相反的顺序排列)
  • flex-flow:flex-direction和flex-wrap的简写!
  • 设置行对齐(当flex-wrap换行时):align-content:stretch;center;flex-start;flex-end;space-between;space-around;initial;inherit。
  • 弹性子元素排列顺序:order;整数数值来定义排列顺序,可为负数,值越小越排在前面!
  • 弹性子元素自身在纵轴上对齐方式:align-self(覆盖align-items);align-self:auto(为父容器align-items值;或stretch)|flex-start|flex-end|center|baseline|stretch
  • 弹性子元素如何分配空间:flex:auto(1 1 auto);initial(0 1 auto);none(0 0 auto);inherit(继承);flex-grow(弹性子元素扩展比例);flex-shrink(子元素搜索比例);flex-basis(子元素默认基准值)【比例,百分比进行分配空间!】

14.CSS3多媒体

针对苹果手机,安卓手机,平板等设备会较多用到多媒体查询!

使用@media查询,可以针对不同设备定义不同规则!

语法:

1.

<link rel="stylesheet"  media="mediatype and|not|only (media feature) " href="media.css">

2.

        @media mediatype and|not|only (media feature) {
            /* css code; */
        }

mediatype(多媒体类型):all(所有多媒体设备);print(打印机);screen(电脑,手机等屏幕);speech(屏幕阅读器)!

and:同时某个条件;not:剔除某些设备;only(特定设备)

        @media screen and (max-width:500px) and (min-width:300px),(min-width:400px){
            body{margin: 0;}
        }

注意:','类似于"or"操作!

15.响应式web设计:

只使用html+css;所有设备上都能很好的显示!

提升用户体验:根据用户行为或者不同的设备环境进行相应的相应和调整!

viewport:视区

常见的viewport meta标签:针对移动网页进行优化!

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width:宽度为设备宽度;height:viewport高度;initial-scale:初始化缩放比例,页面第一次加载(load)时;maximum-scale/minimum-scale:允许用户缩放最大/最小比例;user-scalable:用户是否可以手动缩放!

网络视图:网页时按列来进行布局的!

响应式网络视图:通常12列,宽度100%,浏览器窗口拉伸时会自动改变!

控制布局,每列的百分比:100%/12=8.33%;

示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>响应式布局</title>
 8     <style>
 9         *{
10             box-sizing: border-box;
11         }
12         body{
13             margin: 0;
14             padding: 0;
15         }
16         .col-3{width: 25%;}
17         .col-9{width: 75%;}
18         [class*='col-']{
19             float: left;
20             padding: 15px;
21             border: 1px solid gold;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="col-3">this is test1</div>
27     <div class="col-9">this is test2
28         <br>this is test2
29     </div>
30 </body>
31 </html>

运行结果:当浏览器窗口大小变化时,页面也相应变化;

 在某些时候,我们可能需要不同的方向浏览网页,所以可以使用:

orientation:portrait(竖屏显示) | landscape(横屏显示);

@media only screen and (orientation:landscape){
            [class*='col-']{
                float: left;
                padding: 15px;
                border: 1px solid gold;
            }
        }

图片(或视频)设置成响应式:

        img{
            max-width:100%;
            height: 200px;
        }

如果设置width:100%;那么图片或视频初始显示的宽度会特别大!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

前端学习自学笔记:day02

今天是第二天的学习内容笔记,我一般无事都会一直更新下去,直到我前端学的差不多了,我到时候才会转学其他语言,如果在学习中有什么发现,我都会分享上来. ? 在此之前...

20610
来自专栏章鱼的慢慢技术路

MFC绘图小实验(2)

2033
来自专栏HTML5学堂

CSS3的loading制作,让页面加载时不再单调

页面的loading效果一直都是个比较重要的制作,往往一个好的加载效果可以有效的提升用户体验。而实际开发中,loading效果具体该如何制作?前端工程师又会有哪...

4079
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——图片作边框

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

2636
来自专栏大数据钻研

CSS基础知识

1.认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、...

4893
来自专栏前端知识分享

第93天:CSS3 中边框详解

其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握。

1104
来自专栏IMWeb前端团队

CSS3 object-fit和object-position

本文作者:IMWeb 郭明慧 原文出处:IMWeb社区 未经同意,禁止转载 最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间...

2265
来自专栏闻道于事

正式学习第二天上午——常用标签及列表 0605

今天2017.0605上午,主要学习了常用标签和列表,以下面代码为例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

2826
来自专栏向治洪

html5 jqueryrotate插件实现旋转动画

CSS3 提供了多种变形效果,比如矩阵变形、位移、缩放、旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动。然后 IE10 以下版本的浏览器不支持 CSS3...

3606
来自专栏前端布道

CSS3实现多样的边框效果

1221

扫码关注云+社区

领取腾讯云代金券