今天教大家如何正确使用 box shadow, 首先给大家介绍一下 box shadow 的语法与参数。 开始写代码。第一个, x 轴,设置幺零 pxy 轴,设置幺零 px 背景色灰色来看看效果 第二个, x 轴设置副幺零 pxy 轴设置副幺零 px 背景色灰色来看看效果 第三个, x 轴设置负幺零 pxy 轴设置幺零 px 背景色灰色来看看效果 第四个, x 轴设置幺零, pxy 轴设置负幺零, px 背景色灰色来看看效果我们在之前的基础上再加上阴影模糊二零 px 阴影扩散五 px 来看看效果 我们再试试 x 轴和 y 轴设置为零的效果。本期分享就到这里,喜欢请关注哦 nice!
粉丝416获赞3945
这个,呃。比如说呢?咱们这个点。 boss, 呃。这个十,哎。咱们把它这个宽度高度给它变成零,哎。高度给它变成一个零, 然后给他一个 border, 哎。是一个 border 杠 white 是一个一百家族的,是吧?呃。然后咱们给他一个,嗯, 呃。给他一个 border radios, 呃。这个是 from top left 呃。 top lab reduce 啊,比如给他一个二百像素啊,然后呢?咱们给他一个 border on top color 是一个,呃 green and border left color, 哎。是一个 green 啊。那么此时咱们来看一下它是一个什么什么形状呢?哎。这个怎么呃? boss, 这个是十,是吧?哎。咱们来看一下啊,呃, 哎。给他一个 solid, 嗯。好看。这是什么情况?这个 background 给它去掉啊? 哎。比如说是一个穿的 pad, 哎。好了,穿的 pad 也不行啊,是一个烂的袋装的是个烂。 呃。这个,呃。来看一下这个 background 的,也是给他一个绿色的啊, 嗯,好了,哎。那么此时咱们是不是就给它绘制出一个这个扇形啊?你看它这里面有这个扇,有这个扇形吗?哎。有这样的,是吧?那这样的怎么绘制啊?你是不是给它绘制两个就行了,对吧?比如说这个 boss 十一, 呃,比如说给这个是,呃。 top red 也是一个二百像素的啊,然后呢?咱们, 呃,咱们给他这个,呃 boulder pop color 以及 boulder left 还有咱们的 boulder right color, 哎。给他一个 grand, 那么此时这一看,嗯。这是十一, 呃。然后呢?还是呢?要给他的这个,呃。来看一下,我们来看一下这个是,呃。下面的这几个边呢? and, 呃。怎么想绘制一个这种扇形是吧? 呃。来看一下宽度高度,看下这个合模型啊,宽度高度是这个零啊,然后呢?这个有这个呃 border, 呃。然后呢这个是 border and color, 呃。 看一下,咱们把这几个边框都给它去掉啊,哎。这样是一个,这样是一个扇形,是吧?呃。然后呢咱们给他两个啊, 嗯,给他两个,咱们比如说咱们给他增加一下,比如给他一个嗯。四百,嗯嗯,好。那么给他一个四百的话,咱们再把这个 呃并且给它拿出来,这样就是我们的一个呃扇形了,是吧?然后呢咱们呃来看一下,就说呢咱们。 嗯嗯,行吧,然后呢或者说呢咱们把这两个合在一起啊,就是一个这个呃就是一个这个扇形了。总之呢咱们可以通过咱们的这个呃 bother 啊,以及咱们的这 这个包的 radios 啊,哎就可以穿越出各种各样的形状来了,这样的话我们就可以把咱们的这个呃之间给大家看的这个哆啦 a 梦哎就给他绘制出来了。为什么 a 八绘制不了?因为他不支持这个圆角,对吧?哎,所以说他有一些这个效果啊,像这样的一个效果啊,咱们就绘制不出来啊。 嗯,行吧,嗯,行。然后呢咱们还剩下时间啊,然后咱们看看后面这个支点,应该是我们的这个 哎盒子阴影,嗯,这个咱们简单说一下就行了,这个不难啊。啊?就说呢,我们呢可以给我们的这个盒子啊设置一个阴影或者设置一个投影。什么投影啊? 啊?比如说呢?我们这个桌子啊,在这个阳光下一照,哎,这个有个太阳往下一照,哎,那么一照出来的结果是不是地面上会有一个这样的一个影子啊, 对吧?那就这样一个影子,哎,那么投影阴影就是这个意思啊,我们说啊,你可以选上一个灯源一照这个元素,那么会留下出一个啊,这个影子区域,那么我们是可以通过 boss 研究去设这个投影,哎,那么记得注意的是 我们呢,比如说明星啊,在这个舞台上去表演啊,那舞台上会有很多的这个灯光,是吧?那么这边灯光一照,哎,那么他是不是在这块有个投影啊?哎,这块灯光一照,是不是在这块有个投影啊?哎,这块要是有灯光一照,是不是这里面也会有一个投影啊? 所以说啊,如果你想的动员比较多的话,那投影应该也是有很多的,所以 boss shadow 属性允许我们定义多个投影啊,允许我们定义多个投影,呃,怎么定义呢?用逗号分割出 每组投影了,那每组投影可以有几个参数啊?有这么六个,第一个定义水平便宜量啊,第二定义垂直便宜量,跟咱们啊,这个 wive 坐标器是一样的,也是向右为正,向左为负,向下为正,向上为负啊。 那第三个参数表示咱们模糊的半径,注意数值越大越模糊,零表示没有模糊啊,是实心的。第四个参数表示我们投影的尺,尺寸啊,多大?当然这两个都是可选的。第五个是投影的颜色, 第六个是我们这个啊,投影和阴影这个方式,你是往里面投啊,还是往外面去投啊?然后呢,我们说多个投影用多少割开,我们来看一下, 嗯,比如说咱们首先去新建一个文件啊,这是我们的,嗯,十二 投影,这是阴影啊,嗯,还是呢?在英文中啊,有一个元素啊, div 好了,那么在这个里面呢?嗯,比如说呢,我们给他定一个 plan, 等一个 boss 啊,这个 boss, 呃。好了,然后呢?是我们的 style, 呃,然后呢?是我们的一个呃, boss, 比如给它一个宽度是一个二百像素的,高度是一个二百像素的, 哎,呃, background 呢?是一个 pink 啊,那么页面中就有一个这样的一个元素, 哎,那个是个五十像素的啊,哎,好了,呃。然后呢,注意,那么假设啊,这里面有个光源往下一照,那么我们就可以给他设置投影 啊,怎么定义投影呢啊?怎么定义这个阴影呢? 呃,那就是啊, boss 的 shading, 呃。第一个的是水水平方向的便宜量啊,比如说呢,是一个呃,呃,四百像素,然后呢垂直方向的,呃,就是我们的这个也是给他一个呃一百像素吧, 好了,然后颜色啊,比如给他一个 green 好了,那么注意看,在这个页面中一照,哎,在这就出现了一个投影,但他不是元素啊,他不是元素, 那么他是我们这个盒子照出来这个影子,所以说你审核他,哎,你看,看不到,哎,他是不存在的, 哎,他只不过用光一照出现了这这样的一个影子,哎,当然呢,如果你不想他离那么远,你可以给他调近一点啊,比如说咱们给他一个呃十像素的, 然后呢再给他一个像素,那么此时那么离得近,怎么样?就被我们这个粉色是不是给他盖住了?因为灯光一照啊,那么我们说人是盖住的这个影子,影子是在人的后面的,对吧? 好了,那么这是我们的这个影子,比如给他一个三十三十啊,然后咱们还可以给他设置一个模糊的半径,比如说给他一个十像素的 模糊半径啊,我们一刷新发现边缘怎么样就模糊了啊?边缘就模糊了,然后呢还可以给他设置我们这个 投影的这个尺寸啊,给咱们再来加上一个二十像素, 好,我们一刷新,哎,就会发现,哎,他怎么样大了一点啊?比如咱们往往右边给他一下就是二百三十啊,那么咱们会发现呢,他怎么样比咱们盒子大二像素啊,就是咱们这个影子变大了,哎, 呃,然后呢,我们还可以呃定义它是向内侧投影的, 哎,就给他一个 inside, 哎,向内侧投影,哎,那么就是在盒子的里面,哎,但是这个太大了,所以说呢都给盖住了,比如给他小一点,比如给他一个负二十,哎,这个在里面咱们可能就看不出来了,是吧?因为 呢这个已经盖住咱们这个元素了啊,这是我们这个在这个里面啊, 嗯,在这里面咱们还有一个三十啊,三十啊,好了,这是我们在这个呃里面啊,然后呢咱们能够看出了他的这个投影啊,看出他的投影这是往下面去,是吧?哎,如果呢你没有便宜量的话, 哎,如果要是没有便宜量的话,哎,这都给他变成零,哎,那么他就会发现从四边往中间去投影的,哎,是从是往盒子里面去投影的,嗯,好了,然后呢,咱们还可以定义多个投影 啊,多投影啊,比如说呢,我们第一个是啊啊,一个是三十像素的, 然后呢是一个三十像素的啊,然后是一个绿色的,那么下一个就是我们,比如说是一个五十像素啊,五十像素啊,然后呢这个模糊半径呢?也是一个十像素,哎,是一个粉色的,还可以继续写, 这是一个幻影,金黄色,还可以继续写,比如说呢,是一个八十像素,八十像素半径也是十像素啊,我们给他一个, 呃, sky blue 啊,天蓝色,哎,那么此时我们一看这个盒子里面就有三个投影了,哎,就有三个投影了, 哎,他就有三个 v 了,哎,这盒子有三个光给他一照,嗯,就把这影子照出来了,哎,这就是投影啊,嗯,然后他们同学说这个圆角度数,我们怎么看? 圆角啊?注意,他不叫度数,他叫半径啊。什么叫半径?就是说呢,我们这个盒子啊,哎,就是从中心啊,这个半径就盒子这个圆角啊,就是说呢,他要往这个画一个弧,那画一个弧,那么弧肯定他得有个圆心呢, 哎,那么咱们设置的是这个弧到圆心的这个距离啊,叫半径,那么这个距离越大,我们说圆心越大,这个圆心这个半径越大,那么他画这个弧度,是不是啊?越这个,嗯,越这个平缓一点的,如果圆心越小的话,哎,那你画这个弧 啊,还是还是还是这么大,比如比如说九十度,哎,那么他这个就比较这个,哎,就就比较陡效了,是吧?哎,所以说呢,你看这个圆角大还是小?主要看什么?看这个半 劲啊,看半径多大啊?是这个意思,包括投影也一样,你给他设置圆角了,包点 reduce 啊,比如设置为一个一半, 那么设置为他的百分之五十或者他一半,比如说一百像素,那此时也就说呢,边框,哎,到我们这个中心是五十这个距离去绘制一个圆角,哎,所以说他就变成一个多少了,变成一个圆了,一刷新就变成一个圆了。 那么我们说盒子变成圆了,他的投影自然而然也就变成了一个圆了,因为影子始终与原来的物体是一样的,哎,影子始终与原来的物体是一样的,哎,所以说圆角怎么看啊?圆角看的是什么呢?看的是半径, 因为他要按照这个半径去截取啊,把多余的部分隐藏掉啊,把多余的部分隐藏, 这是我们的这个圆角, 嗯,行啊,然后还有问题吗?然后咱们就不讲了啊。
欢迎来到默然说话的课堂这一讲呢,我们来给大家介绍 css 三新增加的一个阴影的属性啊,那这个阴影的属性是给 盒子加阴影啊,也就是叫 box 瞎斗是吧?啊,那么 box 就是盒子啊,瞎斗呢,就是阴影,那么在前面啊,第五十六讲啊,大家呢介绍过一个 tax 的虾岛啊, tax 的虾岛呢是文字的阴影啊,那么这两个属性实际上是一样的啊,指示作用的,呃,对象不一样啊, tax 的虾岛呢,是针对文字进行呃做阴影的效果, 而这个 box 虾岛呢,是针对我们的标签啊,就是对我们这个标签,这个盒子嘛,这个矩形 来增加一个阴影的效果啊,那么这个 bug 啊, bug 虾的很多方面都和 tax 的一样啊,我们前面在五十六讲跟大家也做了比较详细的介绍啊,那么这个地方呢,就不再去详细的说,那么只是在 延展一下啊,那 tax 的虾岛呢,也有一个属性,就是我们可以干什么呢?增加多重阴影效果啊,而且我们可以改变什么阴影的投射方向啊,这个改变阴影投射方向,我们在讲 tax 虾岛的时候也跟大家提过了哈,那么这里我们还是用一个例子 呃,来看一下啊,那么这个例子呢,我前面的代码已经写好了啊,那么就是,呃, stml 代码,就是有一个 im 机啊,就标签嘛啊,来提供了一个六点 gpg 的图片啊,这里我们可以看一下,这个六 点 gpg 呢,就是爱护眼睛的这样的一个图片,对吧?啊,就是爱护眼镜,那这个在网页上显示出来的效果呢?就是这样啊,这张图片不大啊两百多个像素是不是啊我记得就是两百多吧,我们看一下啊 啊对啊三百乘三百是吧啊三百乘三百啊这样的一个像素值是吧。啊那么现在呢我们来给他呢就是加一个阴影是吧。啊那么 style 我们这里也写好了啊然后我们就来写一个 i m g 的 这个标签选择器是吧。啊那么加和加运营 box 啊剪瞎斗是吧。啊 box 剪瞎斗啊那么这个是一个多值的这样的一个属性啊 那么给值的话呢第一个值呢是讲的水平上的呃一个偏一量啊第一个值是水平上的偏一量第二个值呢是垂直距离上的偏一量啊那么你可以给不同的值啊比如说你给的是正值的话呢这个水平上的一个偏一量呢他就是往左偏啊 那么这个呢是往下偏对吧啊正直就是往下偏移啊呃那么这样加出来的以后呢他就是在右下角啊就在这个地方啊往左偏往下偏对吧啊那么他加出来的呢就在我们的 右下角是不是啊那么如果你这个阴影是希望加在右上角呢那你只要把垂直的这个值改成负的对吧。啊这个我们在文字阴影部分也跟大家讲过啊因为这里改成负值啊那 他就会怎么样呢他就会你看是吧就往右上角去偏了啊那你要往左上角呢啊那就是。呃两个都是副直对吧啊两个都是副直啊两个都是副直啊我们就可以看到哎你看他就往 右上角去偏了对吧啊那这是呃一个偏的过程然后呢他还有第三个值啊,就说你要看到效果是最少是要这两个值啊,呃,两个值是必写的啊,那这样子他才会出阴影,是不是啊?这样子才会出阴影, 那么我们给的第三个值是什么呢?第三个值呢?就是啊,大家看到这个阴影边呢,太硬了,是吧?啊,我们一般看到阴影他都是会慢慢的淡化掉,对不对啊?所以这个时候呢第三个值呢,就是加一个淡化的半径啊,加一个淡化的半径啊,我们就用 十项数,是吧?啊,十项数的这样一个半径啊,大家一看,哎,你看他就有一个比较模糊的啊,一个过度的这样的一个编剧了,是不是啊?啊?就这样一个过度编剧了,那么啊接下来他还有第四个参数啊,第四个参数呢是讲他的扩展啊,就是 这个阴影呢,现在大家看到就是下面这条边有,对吧?啊?这个右边这条边有啊,那我可以去扩展他啊,那么在这个时候呢,我们有第四个参数,比如说我加一个十项数啊,我们来扩展这个编剧啊,那么,呃其实矩形的这个呢啊?效果呢? 呃,就是只要取大一点,然后你看的会比较明显一点,是吧?啊?大家看到啊,你看现在就都扩展开了啊,那么有的时候我们可能不需要那么大的值,比如说我们就只要两个像素左右,对吧?啊?两个 三十左右啊,那么,哎,这个时候你看,哎,这这几个地方都有了一点点的阴影啊,就是他会去扩展他的整个的范围,是不是啊?这个就是我们的第四个指啊,就是他的一个扩展是吧?啊就是对阴影的这个范围的一个扩展啊,他不仅仅是 做这样一个偏移是吧?啊然后这个是抹服啊啊然后这个呢是对他的进行的一个呃扩展是吧?啊扩展的效果,然后呢还有第五个值啊?哈哈。值真多,是吧?第五个值呢就是改变他的颜色啊, 那比如说我们写成九九九啊,因为阴影一般都是灰色的是吧?啊我们刚才他默认指大家都看到是黑色啊,那我把它改成一个灰色是吧?啊九九九。那这个时候一刷新哎大家看这个阴影呢他就淡了很多是吧?啊淡了 很多。完了之后呢就是还有最后一个值是吧?啊最后一个值。这个值呢是一个英文单词啊。 outside 是吧?啊是这个值。是不是 那么呃奥特赛特这个值的话呢?啊我们跟大家讲一下就是他的默认值啊我们看到的效果就是他的一个默认值。就是说呢这个阴影呢是外部的阴影啊是外阴影是不是啊?那么还有一个 inside 呢是他是一个瑞阴影啊 inside 他是一个瑞阴影啊就是这个阴影是潮瑞的啊这个阴影是潮瑞的。但是我现在加了之后你会发现哎你看不见这个阴影了。为什么看不见?因为阴影是在阴影是在 这个这个这个。呃呃。夏瑞去发散啊那夏瑞去发散的话呢?那么我原来加的阴影加在了这个位置上,但实际上现在这个阴影 是在这个位置上啊那么因为在这个位置上阴影呢又是在我们的图像的下面是吧?下一层啊我们讲过的是不是那么这个时候因为他是在内部发啊,那么又发在了下一层,那这个时候这张图片就挡住了这个阴影啊,你这个阴影就看不见了啊, 要看见他呢,实际上也比较简单啊,也比较简单哈,就是加个拍点嘛,加个类编剧啊,就是把我们的图片 呃移出一定的空隙来,这样子我们就能看到这个阴影了啊,比如说我加个二十像素啊,大家都知道这个写就是上右下左都加二十像素,是不是 啊?那这个时候呢,我们就能看见这个阴影了啊,大家看到了吧?啊?就是上边啊,右边下边左边都加了二十像素的内编剧,是吧?那这个时候我们就能看到这样的一个阴影的效果就出来了, 是不是啊?那么呃现在这个形状看上去不好看,是吧?啊?所以我们一般来说呢,我们要换一下啊,我们设置一个,呃,设置一个那个半径对不对啊?设置一个半径叫波德啊,就是上一讲我们才讲的啊, 呃,圆角对不对啊?把它做成一个圆形啊,百分之五十,哎,他会因为这个是个矩形嘛?啊?这个是个正方形,对吧?你加百分之五十哎,你看就成了一个圆形,是不是啊?那这个时候我们看上去是吧?啊?就, 哎,就是还是有一些效果了,对吧?啊?那么所以这个就是跟大家讲的啊,第一个值是水平的偏移啊,可以取负是吧?朝不同的方向去偏啊,负值呢?往另外一个方向偏,对吧?这个是垂直的偏移,是不是 啊?然后这个是抹服的半径啊,这个是扩展的半径啊,然后是颜色啊最后一个是内阴影还是外阴影。那要注意内阴影的话呢。哎会被图片挡住所以这个时候你要加一定的什么呀 啊类编剧是吧。啊把这个类编剧加进去以后呢你才能看出来是吧。啊看出来他这样的一个效果好吧好那么接下来呢再给大家介绍因为文字那个地方没有讲过哈所以这里呢我会再做一个。啥呢我这呢会再给大家呢做一个啊就是我们的 呃这个这个这个呃就再做一个阴影吧啊刚刚我们这里做了一个阴影啊家用了内内内发光是吧。啊不是内发内阴影是吧。啊所以他跑到上面去了啊那我们也可以再做一个啊就是 呃这样的阴影啊那我现在呢我把它加在上面啊就是取两个副值啊。那怎么加呢就是你记好了要加个逗号啊表示我要写另外一个阴影了哈那么这次呢我把它坐在右上角啊右上啊左上角啊左上角就是 都是负的啊两个都是负值啊左上角就是两个都是负值啊。哎这个时候我们刷新一下啊应该也可以看到效果对吧哎你看又加出了一个硬硬来啊然后我们再配上刚才讲的 抹服半径啊然后再加上一点扩展半径啊哎都是跟上面这个值很四很相似的值了是吧。啊那么这个时候呢 哎我们就会看见哎你看就是这样一个效果了对吧啊就是这样一个效果。好然后我们再加一点啊呃改改颜色嘛两个阴影颜色都做成 一样不是很好看对吧啊我们换个颜色值啊,我们换个颜色值,换个啥呢啊?我们写个 a 六啊, e f a c 吧。啊?哎哎,这是一个, 呃,浅绿色是吧?啊,一个浅绿色的阴影啊,我们把这个浅绿色阴影的刷出来啊,哎,这个看就不是很好看,是吧?我们把它做成一个锐啊,锐锐阴影啊,那这个锐阴影他就会攒过来哈, 就攒到这个位置下来啊,在他的内部啊,在拍顶的范围内去显示他,对吧?好,我们再加一个啊, insect, insect, 是不是啊?把它做了反过来对吧? 哎,好了啊,那么这个就形成了一个啊,这样的一个效果,下面是一个灰色的 的阴影啊,下面是一个浅绿色的阴影,是不是啊就出现了这样的一个效果,对吧?啊,那么这个就是关于我们的阴影的一个使用啊,那么跟同学们介绍啊,有, 他一共是有六个阐述啊,然后可以做成多重,那么多重呢?用逗号来分割啊,那这这这个一写,实际上这个属性这样一写还是比较长,是吧?啊?还是比较长,但是好像也没有别的更好的办法, 好像也是只能是这样来完成啊,那么这个就是关于我们的呃,阴影啊, box 瞎斗这个属性给大家做的一个介绍啊,我是默然说话,带领大家呢进入陌生的编程世界啊,这一讲呢,我们就到这个地方啊,谢谢大家。
各位同学大家好,这一节呢给大家讲解啊,盒子阴影,盒子阴影呢是这个属于叫 box 虾的, 这个属相他有六个参数啊,第一种,第一个呢是水平阴影,第二个呢垂直阴影,这个地方是水平方向的阴影啊,水平方向阴影,这个地方称之为什么垂直方向阴影,然后呢,还有什么模糊距离,阴影尺寸,阴影的颜色,还有内外阴影。这个地方指什么?指的是阴影的位置在内在里面还是在外面啊?就这个意思啊, 好,这一个属相除了前面两个属性,前面两个字啊是必须要写的以外,后面这四个可以省略不写。 我们呢看到下面这个啊,这个地方有一个表格是不是好看,第一个 h 敢瞎斗是必须的,只要是水平阴影的位置值呢,允许是负责同样的垂直阴影值,也也允许是负责这个呢,阴影的模糊距离,阴影的尺寸,还有阴影的颜色,阴影的位置在 里面,还在外面啊,好,这个地方呢,我们来给大家写一下,打开编辑器啊,在这里呢,新建一个文件二十五,干什么呢?盒子阴影点下去天猫, 然后啊,盒子阴影,我在这里呢,插入一个 div 点 box。 好,接下来干嘛呢?我们就给这个啊 div 来设置样式,使他要 我们呢找到这个 box 点 box 设置一个什么呢?比如说宽度一百 ps, 高度呢也设置为一百 ps。 好,接下来我们来一个 bod e p x 锁力的紧零零零黑色啊,好,然后干嘛呢?接下来给这个啊, 给这个盒子设置什么阴影好,然后怎么办呢?我们首先写他的格式啊,语法格式啊, 语法 格式是这样子的啊,好,我把它啊,这个地方呢,是一个什么呢? box? 干什么?瞎抖?好,然后什么呢?然后就是第一个指的是水平方向的阴影,第二个指的是垂直方向的阴影。第三个啊,是什么?阴影的清晰度? 好,第四个什么呢?阴影的大小?第五个呢是阴影的颜色。第六个啊,是阴影的什么呢?阴影的位置,这个位置呢,就是在里面和外面啊,他取置有两个,一个是 inside, 还有什么 outside。 看这里啊, 咱们看这里,这里是两个,是一个音色的,一个凹色。好,我们来开始啊,这一个啊,这个凹色的,他是默认值啊,就不写。就在外面啊,这个是默认值。 好,我们这个地方就开始啊,怎么做呢?来个 box 敢瞎斗啊,接下来干嘛?比如三 ps, 三 ps, 三 ps, 然后呢, 这样最后一个叫什么颜色?景 f 零零。好,这个阴影的位置我没写啊,我把它省略了,然后怎么办呢?点右键在浏览器中打开看一下啊, 我们就会发现这里呢就有阴影了。好,如果说呢,我在这个地方再来设置一个什么啊, insert。 好,这表示什么意思啊?表示阴影的位置在里面,再看清楚啊,是不是在里面啊?好,我现在把它给删了啊, 刷新一下,现在干嘛呢?我同样点右键检查一下啊,给大家看一下啊。好,这个地方怎么做呢?看第一个啊,第一个,这个直慢慢变大呢,这个硬是往左边走啊,这个直呢,如果变长 慢慢变小,他是往啊,往右边走是错了,但是往右边走啊,如果只能慢慢变小变成复数,他是往左边走啊,好,这个地方是水平方向的阴影,看不看到啊?好看,第二个,第二个啊,垂直方向,我直变大了他就往下面走,直变小了他就往上面走。好,第三个怎么了?第三个参数啊,第三个参 是阴影的是吗?清晰度值越大代表这个阴影越来越模糊,是不是?好,第四个是什么?好,我把它刷新一下啊,第四个是阴影的大小啊, 好,放在这里啊,慢慢的把它变大,阴影是慢慢变大了,好,最后这个呢,第五个是什么?阴影的颜色吗?阴影的颜色,比如说呢,我给他换一个,所以就变了一个颜色啊,这阴影的颜色啊,这个地方呢,我们给大家截个图啊,我首先把这个代码给大家截过来啊, 然后刚才我们再说了,刚才我们在讲那个文本阴影的时候,这个文本阴影的词是有多高?这个呢,这一个 盒子英语的质量也可以多个,多个之间呢,多组之间也使用逗号来分隔啊,这个地方咱们怎么做呢?我们在这里呢,来一个,比如说负四 ps, 然后呢负四 ps, 接下来,嗯, rps 吧啊 ps, 我换个颜色,比如说来一个这个颜色,我随 找一个啊,嗯,找一个,好,找一个这个颜色啊,好,我现在把它的位置改到里面去看一下啊音色,然后呢我们刷新一下,再看,这里面是不是有一个啊?里面是不是有了一个阴影,大家看清楚啊,这个位置就是它里面一个在外面,一个在里面啊 啊,这个位置呢,我也给大家截个图啊,给大家写一下啊,这个地方是两组阴影啊,这是一组,然后呢后面呢又是一组阴影,看清楚啊,这里呢是两组阴影, 两组阴影。好,接下来我们怎么办呢?接下来我们给啊,我们可以给一个图片来设置阴影啊,看清楚,给图片设置阴影,怎么做呢? 好,这个地方我新开一个页面啊,来一个二十六,干什么呢?图片给图片设置阴影啊,点 htm。 这个地方呢,我插入一张图片 s r c 看一下啊,我们换一个一点 cp 机吧,单前单前目录下面的隐魅器是上面的一点 cpg。 好,我是先把它打开一下。好,这里呢有张图片了,然后接下来怎么办呢?我们开始给图片设置阴影。死太奥, 我找到这张图片,然后怎么办呢?来个 box 跟瞎的,比如说 rpx 啊, px 啊, px 啊。 ps, 现在来个颜色,颜色呢,找个稍微好看一点,稍微浅一点颜色,比如说这个颜色啊, 我们把它放到这里,然后啊结束他啊,点右键啊,刷新一下,可以啊,刷新一下,大家看到这个地方是不是就有了一个阴影啊,看清楚这里就有阴影了啊, 好,这个一般就是给谁呢?给一张图片色的阴影啊,我们把这个呢效果图给大家截一下啊, 各位同学,关于呢这个盒子英语呢,咱们就讲完了啊。
分享几个用于生成盒子阴影的网站, pox shadow 带个页面非常简洁干净,使用起来更是简单明了。左侧用于调整阴影大小和位置,以及添加多个阴影,而右侧可以控制盒子形状和宽高,拖拖拽拽即可生成你想要的效果。 shadow spray 允许用户使用各种参数和选项,创建复杂和视觉上吸引人的 box shadow 效果。它可以对阴影进行单一调整,也可以阴影效果整体调整。其实整体使用和第一个没有太大区别。 对于那些喜欢基于新礼物设计的朋友来说,这个生成器非常适合你,是我比较常用的一个工具,它生成的阴影会更具有立体感。 通过底部的几个按钮,点击跳转即可查看官方生成的按钮复选框、单选框、下载动画等,复制粘贴代码,实现一键生成。 如果你觉得自己调整的阴影效果不理想,或者不想自己调,那你可以试一下这个网站,上面提供了非常多的预设阴影,同时也支持定制化修改这些阴影参数。