00:00
好,那咱们继续来上课,那么这节课呢,我们再来看一下我们CSS3中新增的这些属性啊,那么第一个我们先来看一下这个浏览器的私有前缀,这个我们要了解一下啊,这里面啊,咱介绍呀,CS3呢是CSS就成列电池表的技术一个升级版本啊,那么CS3完全是相互兼容,不必改变现有的设计,那么浏览器将永远支持这个CSR,这个大家可以放心,然后W3W3C的CS3规范的仍在开发,但是呢,许多新的CSS属性现在已经在这个浏览器里边可以使用了啊,但在使用的时候呢,可能有一些兼容性,它需要干嘛呢?需要这个对浏览器进行支持,那么可能有一些实验性质的,我们就需要用到浏览器的私有前缀,那么就来了了解一下啊,咱们浏览器的内核呢,以及其私有前缀,虽然在标准中各个属性都要经历什么从草案诶。从草案到这个推广。啊,到这个推荐的过程,那么CN中的属性进展都不一样,浏览器厂商在尚未明确标准的情况下会提前支持会有什么?会有风险,所以这个浏览器厂商对新的属性支持情况也不同啊,所以会加什么呀,厂商前缀加以来区分啊,如果某个属性已经从草案变成了这个呃,接近推推荐的方案,那么并且厂商已经完全实现了推荐属性的话,那就不需要加这个厂商的前缀了啊,比如像这个包德杠radio,他就已经很成熟了,就不需要加前缀了,包括我们上午上节课讲的什么呀,就是那个冒画冒画select对吧,干嘛选中时的状态他现在已经很成熟了,不需要再去加前缀了啊,那么之前我们还是要需要加的啊,好了,那么了解了这个以后,再来看我们私有前缀有哪些啊,根据这个不同的浏览器内核,Csi前缀会有不同啊,那么最基本的浏览器内核有如这以下四种内核,那么其实我们经常会说有五大浏览器,哪五大浏览器呢?分别是IE浏览器,谷歌浏览器,欧朋浏览器,S那个不是那个苹果浏览器啊以及。
01:49
这个火狐浏览器,那么这五大浏览器里边有用了四种内核啊,那咱们来看火狐的内核。前缀啊,他叫这个,呃。
02:00
GCKO这个内核,然后前缀呢,是杠moz,杠这是火狐浏览器的前缀,也就是说当使用的这个代表什么,代表的是火狐浏览器,然后呢,再往后这个web k web kit这个内核啊,它的前缀是什么?是杠web k它是什么?是我们这个谷歌的内核,那么roome浏览器呢,是最先开发使用的,后来Safari浏览器也在使用这个内核啊,而且这个内核在国内很多浏览器也使用web k的内核,比如说像360啊,世界之窗,猎豹都是使用三六这个sa瑞那盒啊,不是沙,就web kid的那盒。然后再往后呢,MS这是IE的内核啊,这是用的IE内核,那么只要看到杠MS,杠的代表什么,代表是IIE啊,然后包括什么,包括我们的这个欧的是使用的杠O杠啊,所以大家只需要去记住这几种啊,一个叫什么杠Mo z-一个叫杠BK杠,还有杠MS以及杠O这缀内核来标注的才能用啊。
03:06
那一会儿呢,我会给大家来演示一下。那么这几个内核呢,大家先记住啊,有这四种内核,那么包括在这个笔记里边,我也给大家去记了,咱们来看一下,在这个动画这里边,浏览器私有前缀有这么几个,对吧?杠moz是火狐浏览器的杠web cat是chome和这个sa瑞,还有杠MS是IE-O呢,是欧啊,所以大家把这几个记住,记住以后,接下来我们要来要了解一下什么新增的颜色知识,之前我们在设置颜色的时候有什么有这个英文单词的对吧?还有这个六位的16进制的对吧?还有什么,还有RGB的,那么现在又多了一个什么呢?RGBA啊,Rgba模式。小写吧,Rgba模式啊,这个argba模式什么意思呢?就是在在什么在原有的RGB模式的基础上啊增加。一个A表示什么呢?允许设置透明度啊,允许设置透明度,好了,那我们先来测试一下啊,在这里边,呃,直接打开它。
04:07
然后我们来新建一个文件,叫做这个颜色。12啊,颜色至十。好好了,那这里边我们要看的是颜色字。OK,那么来这里面,比如说我们先来定义一个这个div啊,然后呢,这个div我在这里面来给它设置一下style标签,找到这个div,给它设置一个叫做borderder吧,Build borderer1像素实现的so Li红色好了,然后给它一个宽度叫做200。200PX,然后再来一个高度也给他200PXOK,那么有了这个以后,接下来我们来看一下啊。来有这么一个div了,然后呢,我们在这里面干嘛?设置它的背景颜色BA对吧,然后之前我们用的是RGB的格式,现在我用这个RGBA,那比如说一样,我25500现在是什么颜色,是不是它是红色对吧?你看后面这个A,我给了一个一啊走你你看整个背景是不是红色,那OK,那么这回我可以干嘛,比如说我给他个0.3啊,设置它的透明度,那你看周NY。
05:21
看是不是变灰了,哎,就是稍微像上面有个遮罩绳一样,对吧,比如说这里边啊,再来一个,再来一个什么,再来一个P标签,P标签里边我加一个一行E啊。你看。什么效果啊,刷新一下,现在在上面对吧,我给它定位过去啊来PI。等于absolute,然后top为零。好了,这就定位过来了。来吧。是不是透明的对吧,如果我给它设置一让它不透明呢。走你你看是不是看不着后面的内容啊,哎,这就是咱们这个H不是叫rgba模式啊,Rgba BA模式,也就是在原来的基础上干嘛呢,可以设置透明度啊,那好了,那这个完事以后还有一个什么呢?叫叫做HLS模式啊,咱们来看BKGRN,那继续叫HSL啊HS那么有它也有一个AA,就是比许添加透明度了啊这个HSL是什么意思呢?H代表了什么?代表的是这个呃,亮度。
06:22
然后这个应该叫亮度饱和度。HSL。H代表的是不对,不是亮度啊。H代表的是色相啊,然后S呢代表什么呢?代表的是饱和度啊,L呢代表的是亮度啊,这三这三个也这三个值分别是代表的是色相饱和度和亮度啊,那OK,那什么叫色相饱和度和亮度呢?我们来看一眼啊,我在这里边应该是有这个图片诶,我们给他拿过来啊。把它。放到我们这个目录里边来,OK,来咱们一个看啊,先看我们第一个叫什么色像对吧,那么色像呢,它是指一圈的颜色,看到么一圈的颜色啊,那OK,那么既然是一圈的颜色,我就可以给数了,对吧,比如说我这边给一个零。
07:13
啊,给了一个零,然后呢,再往后给他多少呢?S是什么?饱和度对吧?饱和度呢,它是指颜色的密度啊,指颜色的密度,那你看好了,在这里边还有饱和度,那饱和度这里边你看如果是0%的话,就是灰色,对吧?越高到100%是不是颜色就越清晰啊,哎,指的颜色的密度啊,颜色越亮一些,然后还有亮度,亮度就不用说了,如果0%就是黑色,100%就是白色对吧?百分之这个一般50%中间是什么?是正好的颜色没错吧,那OK,这里边。呃,零,然后呢,我们给他呃50%吧。都给他50%吧,啊,都给他50%了,好,那现在我们来看它是什么颜色啊,它是什么颜色。刷新。诶。
08:00
来个100%。走,你。好了,是不是红色对吧,那也就是说从零度也就是代表了什么,代表了从红色开始,没错吧,来再看啊色相从红色我们找到这个图,红色是不是这块啊,对吧,从这块开始,那么到90度,90度是不是相当于黄这个黄橙这个颜色了。没说完,但是这个图啊,摄像二这个图,这个图它就不标准了啊,但它它是标准的图啊,它是标准图,但是它90度,它的零度,零度相当于如果按照这个图来算,零度是不是在这儿对吧?但实际上零度是在哪是在这个位置的啊,所以它这块不算标准,那OK,那现在你看,那我们给它换,换成90度。走,你你看是不是黄绿了。对吧,哎,那同样我们再来,比如说180度,180度啊。走,你是不是变成蓝了,然后最后再来一个,那360度是不是又回来了360度。三白度又变成什么?又变成红色了,对吧?那么同样我根据这个百分比50%的话,可以调整什么?调整它的这个灰度和这个亮灰度和这个就是颜色的密度啊,对吧?如果0%的话,那是不是就属于灰色了?
09:10
你看看到了吧,哎,纯灰色的啊,100%的话,那它是最高的,它是最高的颜色值是最高的啊,那么通过这种HSL模式呢,可以表示出6553种五种颜色啊,我们之前表示颜色,比如用RGB的,它最多能表示多少255种对不对,那么如果用这个颜色值来设置的话,那可以表示大部大自然界中绝大部分颜色了啊,这就它新增的这个,但是对于我们这我们对于这种颜色来说呢,我们并不是太太过敏感对吧?因为我不是专业的设计,一般专业的设计会对这种颜色值啊,会比较敏感一些啊,我们呢是不会太敏感了,但是大家要知道知道这个HSL代表什么意思,对吧?H呢代表的是摄像,S呢代表是饱和度,L呢代表的是亮度啊,那么同样亮度一直给的是50%,对吧,如果我给它0%的话,那你看这个时候是什么样的。走,你是不是黑的对吧?哎,如果我给调成100%呢,100%那就是白色了。
10:05
最后是不是就白色了,哎,这是咱们HSL模式啊,那OK,我还原成50%,好,我给他注释了,注释以后一样,这个我再复制一下,再说了,还增加了一个什么HSLA模式A呢,就是可以继续干嘛,在这里边设置一个透明度,透明度都是零到一之间的小数啊,那现在你看我给个0.3是不是就透明这个文字是不是又出来了。对不对,哎,只只要之前没透明,不管我给的什么值,是不是那个一都不出来,显示不出来吧,哎,这就是咱们这个新增的这三个颜色质式啊,那这里边需要我们去注意的是什么呀,注意的是带A的这种啊这个透明度。透明度的设置啊设置。为零到一之间的小数。之间的小数啊OK,这就是咱们这个颜色值的知识,好了,那颜色值知道了,那我们再来去演示一下,我给大家去介绍一个属性吧,因为我们要用一下浏览器私有前缀,对吧,那么咱说浏览器塑料前置主要是干嘛呢?就是用来当我们这个浏览器中。
11:10
啊,当这个颜色值啊,不能说颜色值啊,就当这个样式是什么,是这个私有前缀的,不是私有是这个测试阶段的时候,我们可以用私有前缀来干嘛,来让它好使啊,比如说我在设置一个描边吧,设置一个字体描边,字体描边你来看啊,这里边他说这个。火狐这些都不支持对吧,只有ome支持,但ome是什么?是实验性质,看到吗?这个颜色是不是实验性的?哎,实验性质的时候你在用的话,你就需要加上它对应的石有前缀才能显示效果啊。好了,这条文字描边我给大家做一个镂空的字体,大家来看一下啊,比如在这里面一样,我们来一个secret selection标签。标签啊,OK,然后这里边叫做。我。我们的。颜色是这个是。这样式儿的。
12:01
是这样的,好,那么写了这么一句话啊,然后同样我先给它调大一些啊,叫做selection,然后给他设置一下,比如说50像素啊,放大小,先给他一个50,或者给他一个100吧,反正就这么几个字,OK。那接下来咱们先来看一。我们先用谷歌来看,先用这个火狐来看啊,但他刚才说了这个谷歌是不好使的,对吧,那上面元素呢,它都由于都是定位的,所以我给大家定位一下POI和season等于阿UT,然后呢,Top我要的距离上边变成300PX吧。200就行了,哎,二百二百二百二百二百一二百二二百二啊好,现在让他下来。刷新好了,字下来了对吧。下来以后,现在咱们来看啊,我要想要制作镂空的。首先它的背景颜色我是不要给它设置一下,就color给它设什么呢?咱们新增了一个透明色,叫做穿parent啊t print,这是什么呢?这是设置透明色啊,叫透明色好了,那么有了透明色以后,现在你再来看走你诶是不是就没有了,没有了,但有没有字儿,你看有没有有吧,那接下来咱们说要做镂空的字体,是不是加个描边就行了,描边就是刚才我们用到了这个叫做呃,Text text杠。
13:17
ST啊,给设置文文字描边,比如说一像素红色的边框,好了,那现在我们来看啊,在这里边刷新,刷新有用吗?没用对吧,那咱说了,我们这个火狐浏览器是什么?是叫杠moz杠对不对,它的私有前缀,那OK我加上,加上以后再来刷新。有用吗?是不是也没用,因为什么呀,这个属性人家说了是不是只有sub瑞跟谷歌才能用啊,对不对,那好,我用sub跟谷歌来看,在这里边我再来刷新。刷新以后你看好了文字有用吗?是不是也没用,为什么?因为浏览器的私有前缀用的是不不对啊,哎,这里面是谷歌的,那我叫什么WE8K吧,哎,用上wi k,那现在咱们再来看,我再来刷新。
14:01
你看我的文字描边是不是就有了,你看我们的颜色是这样式的对不对,那怎么证明它是镂空的字体啊,那在这里边,比如说我在这块加一个image标签对吧?当前目录我们有这么多颜色,这么多这个,呃,图像呢,我换一个来摄像,这里头都有啊,行,就这个色像吧,不用这个色像,这个声太小了啊。当前目录下边。色色。是像这个是很大啊,1024乘1024对吧,好了,那现在你来看刷新。你看整个文字在这上面,你看是不是都像都是镂空的,你看都能看到底下的东西,对吧?只是这块红色的我们看不出来了,为什么?因为它这个这个叫什么,这个我们这个描边,这个边也是红色,没错吧,只要不是红色是否都能看出来,你看看这块儿看是不就很清晰啊,哎,这就是咱们私有前缀的目的啊,也就是说以后我们需要用到某些属性的时候,如果一旦这个属性是实验性质的情况下,那么这个时候我们可以通过私有前缀来调整它,使用它啊,这就是咱们使用私有前缀的目的啊。好了,那这几个属性了解过来之后,接下来我们再往下看,看什么呢?看一下我们的阴影。
15:11
在这里边往下来看啊,诶先看阴影吧,啊,我们一会再来看这个圆角啊,先来看阴影,阴影呢是分为两种,一种叫盒子阴影,一种叫做这个。文字阴影啊,我们先来看一下这个文字阴影,比如说这里边一样,我还叫一个div,然后呢,我给它设置一个ID,比如说叫叫做Y,然后这里边我们来演示的叫做文字阴影,文字阴影好了,那文字阴影怎么来做呢?咱们来看好了,我来找到这个井号万。然后呢,我给他设置一下啊,叫做WTH宽度,比如说一样,我给它这个200像素,然后高度呢,我也给他200像素,然后给它加一个边框BORDER1像素实现。实现了PUR紫色,好了,那现在咱们来看啊,我当前这里边来你。
16:01
哪去了,被他盖住,被这个图片给盖住了。我的。哎呀。应该在。应该在这个小这儿呢,啊在这呢,看到了吧,因为上面都让我给整成浮动的了,对不对,那OK,那这样的话我们就重建一个页面吧,好吧,我们再新建一个阴影的页面啊。来这块就我这块不动了啊,新建一个新建一个特,这叫做阴影13。好了,这里边我们要讲的是阴影,那么阴影咱们说了有两个,一个叫做文字阴影,一个叫做什么?合字阴影啊,那咱们来看,先看文字阴影,这里边一样,我再来一个div,然后给它一个井号叫做Y,然后在这里边我们一样写成文字阴影。叫做文字阴影,OK,然后呢,在这里边一样,我们进行调整style标签,然后在这块来个井号one,我们给他先来设置一下wi给他一个呃200像素,然后he给他也是一个200像素,B1像素实现。
17:06
So,然后给他一个这个颜色,OK,那现在我们来看啊,嗯,不再是这个页面了吧。好有了吧,有了以后咱们来看啊,这个边框我就可以给它去掉了啊,这里边有文字就行了,我给这个文字先放大一下,放到到size,比如说给它放到50像素。来刷新一下。有了,那么有了以后接下来干嘛呢?我开始给他设置文字阴影,叫text杠啊,Text-sa那么这里边我需要去给什么呢?给它阴影的格式,比如说这里边啊,先给他一个5PS5PX,然后这个呃,R。G。B。Rgba吧,给他什么样呢,红色。零,然后让它点点点点8.8啊,点八什么意思,就代表0.8的意思,0.8的意思啊好了,那现在咱们再来看刷新,你看在他的这个有没有一层文字阴影啊,但这个有点看不像阴影了,是不是就相当于两个文字的书写呀,对吧,就相当于写了两层重影了,是不是?哎,那么这个时候可以再干嘛呢?再加一个5PX,这表示什么意思?表示它的模糊度,你看这时候它变成模糊了吧。
18:19
这是不是阴影效果就有了,哎,只是这个5PS,这个5PS5PS什么意思呢?代表的是第一个代表是横向偏移位置,第二个代表是纵向偏移位置。大家注意你看好了啊,我们浏览器是什么样的,是不是这样的和这样的对吧?这块是不是就相当于这个点,是不是就00点呢?哎,那么往这边X轴对吧?往这边叫什么叫做正值对吧?Y轴往下叫什么叫做正值对不对?所以刚才我给他5PX代表什么水平向右边是不是5PX,然后这个第二个5PX代表什么?垂直向下边5PX对吧?所以你看这个文字本来是从这块00点是不是往往下右往右。
19:00
对不对,所以它在这个文字的下方看到了吧,那既然是这样,那如果咱们天条一个啊,比如说这是垂直的对吧,这是模糊度,这个垂直的如果给它负负值的话,那它是不是就上去了,对不对,那你看现在是不是又上看到了吗?哎,那同样,那如果是我这个也给它负了呢?那现在你再来看是不是。变成这边了,也就相当于变成这边,是不是相当于我的光是从这个角度照射进来的,会打出阴影吧,对不对?哎,那同样比如说这块,我这个前面是是负的,后面是正的,那现在你来看走,你是不是变成下面来了,变成下面这个时候是不是相当于光从这个角度照过来,打出了阴影啊。看明白了吧?哎,这就是咱们的文字阴影,那么微信当然阴影可以加多个啊,我通过动画分割,接下来我可以接着继续写。这里面比如说一样啊,比如说我还是我就会改成正午吧啊。或者正二小一点啊正二。正的啊,然后这里边呢,我再来,那这个就是4PX啊4PX,然后一样模糊度是5PX2。
20:03
GR rgba rgba给它什么透明度,呃,颜色值啊,那这个颜色就给什么呢?红第二个是绿,那就255不对,红绿蓝的02550对吧,透明度呢,依然是点八,那OK,现在我们再来看走你。你看红的外层是不是还有一层绿啊对吧,然后再往下呢,再往下我就再给是不是还有蓝的,那我直接给它复制一个啊CTRLC再复制一个,然后这块依然是点八,那的话是255,然后前面是什么,前面是零吧,然后这里边就不是四而是。八。八然后好了。再来刷新。那你看现在是不是红的绿的在外头套了一个蓝色,没错吧,哎,这就是咱们的文字阴影啊,好了,那文字阴影我们知道了,接下来还有什么呢?还有盒字阴影啊,盒子阴影说白了就是元素加阴影,那盒子影什么样的?比如说这里边咱们再来一个叫做div,来一个井号ID,呃,不对,井号万吧,呃,万有了哈,井号啊井号好了,那这我们来控制这个盒子井号,那比如说这里边一样,咱们给他100像素,然后高度呢,给他一个40像素好了,然后给他一个边框包的一像素实线的井号000黑色,那现在我们来看走,你看这块是不是有这么一个盒子,对吧?那么有了这个盒子以后,接下来我可以干嘛?给这个盒子加阴影叫做fo杠塞好。
21:29
盒子阴影叫做box杠塞,斗文字阴影叫做case杠塞,那么它的用法跟它差不多,但是它有一些区别啊,那第一个还是什么水平的偏移位置,比如说我给他十,第二个也是水平的偏移位置,对吧?然后第三个呢,我给他个模糊度,比如说模糊度呢,我也给他5万,然后再往后RG rgba啊,给他这个。透明度对吧,那不是不是透明度啊,给的这个颜色是吧,那一样我给的什么颜色,比如说我给他这个啊,255255。然后零,然后点八啊也点八。
22:04
好了,那现在我们来看啊,在这里边刷新,你看这里边是不是有这么样的一个阴影啊,对不对,当然啊,这种因我就可以不给他也行,比如说我给个井号C跟C这个更贴近阴影的效果,对吧,因为阴影还多,都是比较偏黑一些的,来你看是不是也有个阴影看到了吧,当然这个阴影我给的比较大,那我可以给的小点,比如说我给的三对吧,给它这个垂直也是三,然后模糊度是五,那你看刷新。看这边是不是也有一层淡淡的阴影啊?哎,这是第一种情况,那么还能怎么设置值呢?咱们再来看,比如说fo-sa。那一样啊,我都是5PX,比如这块我不动了,我说0PX0PX,然后呢,模糊度是5PX,然后后面我给个10PX颜色值ex井号C跟C,好了,咱们再来分析这个10PX是什么东西啊,那你看好了,我再来刷新诶看它是不是照着外圈外延扩,外圈外延伸一层啊对不对,哎,延伸的这个大小大约是少,大约是十像素,也就是说如果我没有给它这个偏移,对吧,我直接设置了五像素跟十像素,那么前面这个五像素代表什么,代表的是模糊度,后面这个十呢代表什么?代表的是外延值,外延值啊那一样,在这设置它的时候,我能不能设置它呢?也可以你看。
23:19
这个横向偏移位置为五,纵向偏移位置也为五,那么现在再来看,我再刷新,你看是不是就往下了,但是在外延值的情况下,我这里面是不是有外延值,这个外延值是不是这个右下方是比较大的。没错吧,哎,这就是咱们这个设置外延值的情况啊。好了,我给它再还原回来啊,因为把设置外延值一般都是什么,让它在圆封这样会比较好看,对吧,不让他去移动的情况下会比较好看啊。啊,那外延值设置完了以后啊,我们还能怎么设置呢?还可以设置它的内置阴影,怎么叫内置阴影呢?Bo-settle。然后一样,你看好了啊,比如说内置阴影,我也不给它设置这个横向跟纵向偏移位置,我就给它抹弧度跟外延值,然后给它一个颜色,接下来在后面加上最后一个参数,叫做in inside in inside代表设置什么,设置内置阴影,那现在你看走你你看我的阴影是不是向内部内这个里边去发的,对吧,那一样啊,这里边我这个外延值给太大了,我小一点啊,我给他五像素来,你再再来刷新,你看这是不是就是阴影的效果。
24:22
看到了吗?哎,都像什么,像这个元素的内部啊,去延伸的,这叫什么内置阴影啊,好了,那么一样阴影也可以设置多种样式啊,比如说在这里边。What?Fo sa。好,0 PX0PX,然后每个模糊都是三。外延也是三,第一个比如说我给了一个红色啊,好了,现在你来看走你你看向外延伸对吧,然后再来,我可以再通过逗号还是一样0PX0PX抹糊度呢,我依然是3PX,但是我向外延伸的这回是6PS红绿加一绿色,然后这个时候我再来刷新啊,你看我的第二层是不是就变成了绿色对吧?那绿完之后我是不是还可以再加这里注意啊,这里面是无限制的,你可以一直加阴影对吧?如果你需求你可如果你有这个需求,你做出彩也没有问题,那么依然是三,这个是红绿,下一个是不是就蓝B蓝色,那OK,现在看。
25:24
你看它的最外层是不是就有个蓝色,红绿蓝三个色对吧?哎,这就是咱们色置阴影啊,那么其中阴影的格式第一个是什么?横向偏移位置对吧?第二个是纵向偏移位置,第三个是什么?它的模糊度,第四个是它的外延值,第五个是它的颜色对吧?如果第六个呢,代表什么?代表的是它的内置阴影啊好了,那现在咱们来看啊,比如说在这里边我们也做一个什么呢?我做一个这个鼠标悬停的一个效果啊,然后做出一个按钮的效果吧,咱们做出一个按钮的效果,虽然现在我们还没没跟大家说这个圆角,但是我们可以做啊,来你看好了。
26:01
这里边我们来做一个叫做按钮对吧,那么接下来我也要对它进行一个调整吧,算了,我们不用它了啊,我再来一个标签吧,来这里边再来一个div。然后井号叫做ree three,然后呢,这里边我们直接加上按钮两个字,然后我先调一下它的样式啊,井号the three,然后with,宽度比如说我们依然给他100,然后呢,高度呢,我们给他呃,50吧,对吧,或者这块能大一点一百二啊,然后高度50,然后背景颜色BKGR,比如说我给他一个绿色GR。OK,那现在我们先看一下样式,走你,你看好了,这里面是不是有这么一个按钮,然后我可以给他设置一下叫做什么,Margin margin top marin marin top,给它设置距离顶部30像素,那现在我们来看走你。是不是距离顶部有30像素,然后我可以跟这里边的所有内容都让它居中一下啊,K-a Li Li k-A接任等于一个。
27:02
Center center对吧,然后呢,再往下来,Center完事以后,我再给它设置一个LA head line head等于50像素。好了,文字在这里边居中了,对吧,那居中以后一样,我这里面把文字给它变成白色的color等于。我变成透明色吧,透明色有这个背景应该也能显示出来,对吧,那我们来看一下啊,哎,有透明色显示不出来了是吧,不能用透明的白色啊,井号C,呃,井号FFFF,然后来看走,你按钮有了对吧,然后按钮有了一样,这个时候我们可以,哎,我是不是还可以给它设置一下间距啊,叫word down space对吧,给一个这两个之间的间距大一些。Word-space不好使吗?那就是letter,他俩是有一个对中文无效的,对吧,Let letter space。TTOK。那现在我们来看中尼好了,文字是不是动了,那现在接下来干嘛啊,接下来你看好了,我们这两个都有了,我肯定要给它设置一个阴影对吧,那box-settle然后呢,怎么设置呢?比如说这里边我让它外延这个横纵,呃叫横向和纵向都是偏移三项数,然后模糊度呢,也给它三项数,对吧?然后颜色呢,我给它井号CCCC好了,那现在我们来看啊。
28:24
周NY。呃,好像有点暗是吧,呃,这个三项树给的有点多,那颜色我就变深一点吧,井号淡淡带。增益好了,这回有了对吧?那么有了这个阴影以后,接下来干嘛?是不是我鼠标一悬停上去,相当于摁到这个按钮以后,这个按钮是向里边去凹的对吧?哎,因为钮本身是一个凸的嘛,那接下来怎么办?那th ree我再来,当我鼠标移动上去了以后,也就是给他一个号的属性,那么box杠我来改变它改变什么呢?还是一样,3PX3PX3PX,但是我让它。
29:01
井号零啊000,我让它干嘛呢?让它内延in set啊,给它设置内延值,那现在你来看啊,我来刷新走NY你看,但是注意啊,我这块啊,是不是像死这个这个字啊,像死在这儿一样,是不是一点感觉都没有啊,所以我可以给他干嘛呀,稍微变化一下,比如说一到这样的话,那我让它的这个PA顶pad pading left距离左边移向数,这个时候这个字也会动一下,你看好了啊,走你你看字是不是也感觉在摁下去了。对不对,哎,包括比如说要是感觉小的话,那你可以给他二项数,那你看我们自己的按钮的效果是不是就做出来了,对吧,那还剩一个什么,如果我们会圆角边框,那是不是直接加原本边框就更完美了,那比如说在这里边看好了,我直接给你加一个啊包。杠idus,它就是设置圆角边框,我就给个实像数,那么现在我们来看。是不是有圆角效果了,那一样,鼠标摁上来就是这样。按上来就是这样看到了吧,哎,那OK,那么现在我们会完这些以后,接下来我们就来看一下圆角边框啊,看一下圆角边框,那么圆角边框啊,它的参数是比较多的啊,它的是比较多,它的最多的参数是两个参数八个值,来我们再一样,我新建一个文件啊,我们来看这个圆角边框。
30:19
呃,HTML文件我们来建,叫做14圆角边框。好了,那在这里边一样圆角边框。好,那在这里边我们继续,然后我们往这里边写一个元素啊,给一个div。不用div了,因为我们刚讲的标签select嘛啊SSE,然后在这里边一样,我给它设置一个ID等于Y,然后我们来给它设置这个圆角边框,那么圆角边框最多的值是两个参数八个值对吧,那么先找到这个Y,然后我们给它设置这个参数。诶,不行,我们没给他加style标签啊。然后井号Y。
31:03
好了,那么在这里边我们开始进它,对它进行设置,先给它一个宽度,比如说给他200像素,然后再来个高度,也为200像素。然后来个borderder epx so,红色的边框。好了,现在我们来看一下啊,我们页面的样式有这么一个东西对吧,那么接下来我给它设置它的圆角叫做border-I dius reduce,那么它有两个参数八个值,你看啊,我给他10 PX10 PX20PX吧,然后三十四十,好了用竖线,用那个斜线分割以后啊,分割以后再给它四个参数20,然后三十四十。OK,那么这是两个参数八个值对吧,那现在你看它的圆角变成什么样了啊。你看好了,我左上角的这个角是不是最小的一个,然后右上角是稍微大一点的,然后右下角又大,然后左下角是不是最大的,哎,这就是两个参数八个值,它有很多种的变形啊,那它这个圆角是怎么形成的呢?我们把这个原理知道了,那设置值就会了。
32:02
比如说正常我们有一个边就是这样的,对吧,然后呢,在这里边,我们刚才我设置的这个是什么,是十像素,然后20像素,30像素和40像素,然后再往后来呢。斜线继续十像数二十三十四十对吧,那么第一个数注意啊,我第一个参数左边的第一个参数这个十项数和右边就后面这个斜线后面的第一个参数的这十像数,它俩代表一个角,这个十像什么呢?是我左上角的水平坐标和右上和这个左上角的垂直坐标,那么水平坐标先这个是水平,这个是垂直的啊,那么水平会向内部延伸十像素。延伸实像数以后,然后垂直也会向内部延伸十像数,那么它最终在内部去相交为一个点,那么以这个点为圆心点开始做画这个圆或者是椭圆,对吧?为什么说画圆或者椭圆呢?如果你的垂直给的是什么?你要是垂直给个二次像素水平给个十像素,那画的就是椭圆了,对不对?就是这样的一个圆了,那么不管是正圆也好,还是椭圆也好,最终你看我这里边是不是都与这个边框有一条边是相邻的对吧?那么最后相与边框相邻的这条边就是相交的这条边就是我们圆角的边框啊,圆角的形成就是这么来形成的啊。
33:17
这就是咱们的圆角边框。圆角边框啊。那么一样,那这里边第二个参数呢,你看好了,我的这个水平位置的第二参数是20对吧,垂直也是20,比如说垂直我给它改成30,那这个时候它水平位置会向内延伸20像素,对吧?然后垂直呢,会向内延伸一个30像素,那么最终在这里面是不是也相交这么一个点,相交一个点,以这个点为圆心,我们开始继续干嘛做圆。椭圆啊,那么做了这个圆以后一样,这个圆是不是也与边框有一条边是相邻的,那么相邻的这条边就是我们圆角的形成。啊,这条边就是咱们的圆角边框啊,所以咱们形成圆角边框是有这么几步的,我给大家去记一下子啊,那打开咱们的这个笔记。
34:07
呃。阴影圆角,圆角在这对吧,那OK,那么圆角这里边叫做关于圆角的形成。第一呢,是从指定角的顶端,顶端向。内部引出垂直半径和水平半径啊,然后第二呢,将这个水平半径和垂直半径相交于什么呀,这个元素内部的一点,这个点就是未来我们的圆心点对吧,然后以该点为圆心。指定的垂直半径和水平。半径画圆或者椭圆。对吧,然后最后与边框相邻的。叫雨。
35:02
边框相交的部分就是什么,我们的圆角部分啊,所以刚才我设置了两个参数,两个参数八个值,八个值分别代表什么意思啊?第一个参数是。左上角的水平半径对吧,第二个呢是右。上角的水平半径,然后是右下角的水平半径,然后是左下角左。下角的水平半径,这是我的第一个参数对吧,是四个字,第二个参数呢,又是四个字,通过这个斜线分割,那第二参数就是左上角。左上角的水平。半径,还有左上角的垂直半径以及右上角的这个垂直。半径第一个打错了啊,第一个应该什么垂直对吧,第二参数都是垂直的半径啊,然后最后一个是什么又。
36:04
下角的垂直半径啊,OK,这就咱们两个参数八个值,这是最普通的一个设置了,对吧,最全的一个设置了,不能说最普通,那么OK,那再往下来还有什么呢?还有再来,比如说你看好了,我再给大家设置一个,比如说找到我们代码啊,然后把它,呃,它注册掉吧,不要它了啊这回呢,我给它设置一个参数四个字,比如说border-I dius,然后十像素,20像素,30像素,40像素,好了,那么你看啊,我再刷新有什么变化没有。有变化吗?没有吧,哎,如果我设置一个参数四个值的话,什么意思?第一个值代表的是左上角的水平和垂直半径,第二个呢是右上角的水平和垂直,第三个呢,是左下角的右右右下角的水平和垂直,然后这是左下角的水平和垂直啊这是设置四个参数,那么再来能设置四个,我还能怎么设置,你看啊,包杠I。Dius对吧,比如说我给他一个十像数,一个二次像素,就给设置两个,注意这是不是一个参数两个值,那现在你来看周NY,你看好了,我这个时候是不是对角线是一样的啊,我的右上呃左上角,左上角跟左那个右下角它俩是不是。
37:14
弧度是一样对不对,然后右上角跟这个左下角它们两个的弧度是不是又是一样啊,诶这是什么呀,代表的是左上角跟右下角的水平和垂直,然后右上角跟左下角的水平和垂直啊,这是两个参数,那么一个参数两个值,那么接下来再来包杠。Rus。我还能怎么设置,比如说我就给它设置一个参数,十像数,这什么意思啊,这就表示的是哎,Border I adius啊这就表示什么意思啊,表示的是我四个角的水平和垂直都为实像数,诶,我点哪去了?刷新你看四个角的水平的垂直都为直向数,是不是都一样的呢?哎,那么一样啊,比如说这里边其实我说了它有很多种样式,那你看如果我这么设置呢,比如说包杠I diuss,比如说十像素,20像素,然后斜线十像素。
38:08
20像素30像素40像素。这是不是两个参数六个值,那你看这样是什么,什么效果来走你。你看是不是也能出现表示什么意思,你看好了啊,我左上角跟右下角为十水平的对吧,然后右上角跟左下角为20水平的,然后其他的垂直的左上角是十二十三十四十,是不是这样的对吧?那你看啊,我的右上角是不是是一个正相当于一个正圆一样,对吧?左上角也是一个正圆,其他这两个角都不一样,为什么?因为其他这两个角都变了。对吧,一个31个40垂度垂直对吧?哎,所以这就是咱们这个圆角边框,那么最常用的是设置一个值,那设置一个值,比如说border-I diuss,我想让这个当前啊,当前这个叫什么?这个元素变成一个正圆,因为它本身就是一个200乘200像素的,对不对,那变成一个正圆,你想想是不是就是四个角的圆心点,我都给它定到中间这个点。
39:06
是不是就是正圆了,对不对,那定到中间这个点,那我应该给多少,是不是一半的100PX,水平跟垂直都是100PX吧,那现在你看我再来刷新,是不是就是一个正圆,对吧?哎,包括我可以这么设置,我还可以怎么设置呢。包德杠,I dius,我给他50%是不是也行,你看好了,刷新是不是也是个正圆,哎,那100%呢?100%是不是也一样?对吧,来再刷新是不是还是个正圆,对吧?因为前提是什么,我的这两个宽高是一样的,那如果宽高不一样的,我还能做出正圆了吗?那是不是就不行了,比如说这里边咱们来看啊,我再来一个元素。E叫做井号兔,好了,那我拿这个two再来设置一下号TW,然后给它W100HE200对吧,然后borderder等于一项数,实现so红色,好了,现在各位你来看我这个元素啊。
40:07
你看是这样的,那我不管怎么设置,比如说包杠I dius,我说给他50%那。它是一个什么,一个椭圆吧,是不是一个椭圆。因为垂直是50%对吧,然后水平是。这个100%的这个高度对不对,那有人说,那你就是一个,呃,水平位置给50%,垂直位置给100%呢,那你看是不是还是这样啊,来刷新你看。是不是还是这样,只是什么呀,位置在斜位了,因为什么,因为它的宽高不相等,对不对,哎,所以这里边啊,注意如果宽高不相等的话,我们是没有办法去给它做出正圆的啊,一般我们在设置也不会去给它做出正圆啊,一般都是什么?就是比如我给他10%对吧,所有的10%,那让他干嘛,让他角度都是一样的,看到吗?角度都是一样的就可以了啊,角度都一样的就可以了啊好了,这就是咱们的圆角边框。那么一样,我们通过原有边框也能做出很多的图案啊,那比如说在这里面我想做一个什么呢?我想做一个这样的效果。
41:07
来,我们练习一下啊。这是一个圆对吧,然后。给他一个喷壶。好了看好了,这一半是空心的对不对,这一半是死心的,我想做出这么样一个效果,怎么做,那有人说那就是什么两个div对不对,两个div上面一个下面一个,然后上面的设置这半拉对吧,上面设置哪设置的是。这样的。对吧,也就是它左和右下边呢,设置哪啊是置它是右下分左下是不是就形成了这样的一个效果,那OK,我们来看一下啊,比如说在这里边再来我来个HR分割一下啊,然后在这里边ST叫做井号t REC three,然后CTRLCCTRLV复制一个,这个叫做for for。好,然后在这里面呢,我们开始进行来设置井号t ree,给他一个wi,那比如宽度的话,我们给他200,然后高度呢,我们给他一个100,对吧,然后BA GR background,比如说给他红色。
42:14
呃,上面是没有的对吧,那不给了啊,不给了,只给给个边框吧,包杠EPX。Border EPS so,红色,然后再往后呢,井号th re,呃,For码。For for,然后给它一个叫做什么bur包移像素实现的红色,然后BGR红色,然后这个它的宽度依然是200,然后高度是一个100 OK,那现在咱们来看,先不给圆角的情况下,我来刷新这两个东西是挨在一起的,对吧?那么接下来我设置大的这个左上角,没错吧,那大的左上角。呃,就是它呗,Bo-radio它的左上角是多少啊。
43:00
比如说是呃,百分之变50%,我就直接给像素吧,啊左上角的话应该是100像素吧,对吧,然后呢,右上角呢。也是100像素对吧,然后左下角和右下角是不是都为零,那现在你看我一个半圆形状是不是就有了,那么接下来底下这个呢?底下这个是不是就一样包的杠idius,它的这个左上不动,右上不动,下面这两个100。100。对不对,那这个时候,诶不对,少一个什么分号好了,那现在我们来看走你是不是就过来了,是不是做出这个效果了,对不对,但是做出这个效果做出了这样做就很麻烦,明白吧,那么咱们既然叫圆角边框,圆角边框它固然是跟边框相关的嘛,那s select,比如说这里边我再来一个five。然后井号five你看好了,我用它来做啊,怎么做呢?WTH宽度依然是200,然后高度呢,我是100,看到了吗?然后边框我给的移像素实现的红色,然后再来一个包杠BOT Tom底部边框我给它100像素啊,然后so Li红色,那这个时候你看好了我的整个这个元素。
44:12
是不是还是一样大的,看到了吗?是不是还是一样大的,哎,还是一样大的,那接下来我是不是就一条属性就可以了,叫做包德纲res,我直接给个50%,或者是什么直接100像素,那这个时候你看是不是就形成了这个圆了。看到了吗?哎,所以方法有很多种啊,就是看我们在做的时候是怎么做啊,这就是咱们的圆角边框啊。那OK,那这节课我们上到这里。
我来说两句