20.尚硅谷_css3_边框图片.wmv原创

啊，嗯，其实上午咱们就讲了两个点吧，感觉讲了一个新的原方案里面和睦相法全部讲完了，讲了个圆角是不是啊啊，那下午能把这三三个讲完就已经差不多了，我感觉啊，啊这三个东西里面还是蛮多的啊，首先看一个边框图片啊，圆角这块其实我们上午也做了好多扩展是不是啊啊上午这个扩展啊，这个东西不是说不重要，这个东西应该是极其重要的，只不过不是C3面的东西啊，这个345其实都是讲在C2里面的东西。啊对你们对这个成绩到底有一个什么样的体会，以及对这个决定定位跟包含快啊有有一个怎么样的认识啊，这个我们后期考试我们再看，如果感觉不满意再讲啊，啊这一块的话就是首先你得知道怎么去用绝对定位去模拟攻击地位啊，以及在这个过程当中怎么去处理这个滚动条的，能不能理解啊啊这些东西自己整理整理好，OK，那视频资料我已经给你们了啊，过年来了我肯定会考的啊，过年来第一天你放心肯定就是考试啊，看看你们之前讲的东西有没有忘掉啊，如果忘掉了全部回去。

自自学一个礼拜再来啊，OK，我们再来看好呃。新的UI方案里面，其实我们新增样式这块是不是只讲到了圆角是不是OK，看下面还得讲什么边框图片是不是，这是一个很神奇的东西啊，看一看啊，我感觉有点鸡肋，可是我确实看见有人在用啊，来看一下这个边框图片是干嘛的啊？一些比较时髦的网站可能会去用啊，这要配合UI，让UI给你去设计图的。来看一下零四边框图片。OK，比如说现在我就来一个小小的盒子吧。啊，OK，来一个标签，只有你。干掉。啊，马父子之前应该有讲过，是不是啊，马副子是干嘛的？

稍微扯一扯，马复制是把自己的文档边界往里搜吧，是不是啊啊，这个你得你也清楚，马复制也是经常会被问到的，在我们项目当中也经常去使用到啊，一些布局上面的细节的话，我们都会通过马复制来调能明白，OK，这里嗯，来看一下，比如说这个test，好呃，这个test还得让他去随平测试居中啊，那这个东西我就贴了，我就就在写。Ctrl OK，一个盒子没有盒子，没有盒子，因为没有，刚刚还是没有，因为没有边框，是不是你们边框是学过波的APX的实心的边框是不是默认是黑颜色的，还有什么边框。虚线的是不是这是不是虚线的是不是点点点的点点点是什么鬼啊是不是他是不是点点点的吧，是不是还有一个double的，Double是什么两条线吧，是不是OK可是问你这些边框丑不。

一像素的时候肯定还好，不吵啊，他咋整到十像素呢，就不好看了是吧，走到30像素呢。啊，这个其实还好啦，是吧，这个还好，Double其实还好，是不是你看。实心是不是感觉有点单调了，是不是还有呢，虚线的虚线看有没有我的天是不是迷宫吧啊还有什么点呢。好玩了啊，这边成骰子了是不是OK啊，那其实我们一些比较好看的站点里面，这些边框是不是都是用UI来设计图的是吧？所以说这边CPI里面给我们出来一个新的API，叫图片边框。

啊，边框图片什么意思啊，它允许你在这个。波的里面去放图片啊，有没有见过在波的里面放背景图的？之前没见过，没有吧，哎，现在来了，这个里面就可以放放什么放图片的，看怎么放。好，干掉。我们来看一个属性叫什么，Border image source border image source属性定义，使用一张图片来代替边框样式，如果为纳，仍然使用style。是不是啊，我们刚刚是不是用的的简接属性啊，里面是吧，以及吧，是不是OK这边他说干嘛，我说怎么喉咙那么OK，这边我们干嘛。啊，这边我们说如果你使用博的麦硕啊，那他干嘛，那它就是可以代替这个的style样式懂不懂，那我们来搞一张图片过来啊，这个图片一般是需要专门设计的。

啊，不，又找错了。找到这边prepare里面新的UI方案，新新增钥匙边框图片，诶，把这个图片找过来，CTRLC拎过来。OK，我们边看图片，是不是我们来个什么波的什么。Source什么意思，资源嘛谁嘛，是不是，哎一般是不是S啊。是。诶，好像是U，是不是来找image底下的是吧。你看是不是ul image加玻璃钢image，点添加找到他看这是什么鬼。什么什么鬼都没有，为什么现在你是不是只是引入一张玻璃卖家？

你有边框吗？没有，所以说一定要来一个边框，边框给粗一点，给30X对不对，你看你写这个样，现在有用吗。有吗？有实心的线吗？没有，其实这个样式已经被覆盖掉了，所以说这边你只写个玻璃钢吗？其实就可以了。A。玻没有style的话，是不是玻璃都没有作用？是不是啊，记得我们在讲波的时候，好像是没有border style的话是没作用的吧，是不是啊，看看是不是我们说来个。那是不是还必须得有style？哎，这个烦人啊。哎，真的是是不是啊，看我如果把这个玻璃放到这个玻璃杠1IMAGE就S底下去。哎，没用的是不是，OK，它只剩玻璃钢一，那就是吧，相当于它会把这个玻璃掉给干嘛。

覆盖掉吧，而且你还不能没有这个不掉。是不是这个道理啊，那我一那我们一般是不是只写写个简减属性就可以了，30PX的实性是不是只念，可是你看跟我们想象的好像不一样。是不是我很明显，你如果没有这个玩意的时候，我们看我们的边框应该很粗的。是不是你一旦有了这个玩意，你看我的天干嘛？四个角上有这个吗？这张图片吗？是不是啊，是我们想要的效果吗？不是，是不是我们想要的效果，其实什么，要么你让这个玻璃一面积再在我身上评估，是不是，其实这种效果也不好，是不是我里面是不是有九分啊，是不是来看我的边框。边框，其实我的边框它长什么样？这是不是一个边框，这是不是一个边框，这也是一个边框。

这也是一个边框。有没有看见九宫格不九宫格？有没有123456789吗？九宫格吧，其实我的目的是想什么？你现在给我一张图片，也是一个九宫格吧？是不是我想把这个每一个九宫格里面什么图片，这个麦上面每个九宫格放到我的什么。对应的放到我这个页面上来，放到我这个元素的边框上去，能不能理解啊，就是这么设计的，可是你发现这么写没用。默认情况下，它就会把这张图片干嘛进行缩放，放到四个角上懂不懂？如果你只写一个薄的一面就说实话懂吗？如果你这个边框稍微小小一点，它还是会缩放的。你们看一下OK啊，不是我们想要的效果是不是？来看看还有什么属性，这里看看还有什么属性？不璃的硕是去找图片的啊，默认只是到不可继承的，哎，看board image sentence是不是？哎，好玩了，看什么board image sentence属性，通过规范将什么board image硕的图片明确分割为九个区域。

四个角，四条边以及中心区，相当于这个属性，其实是干嘛。是要把我这张图片它是不是有个地址的，你用那张图片的这个属性就是什么，告诉浏览器怎么去分割刚刚那张图片。懂不懂，一般会把它分成九个区。这能理解吗？来看一下，比如说我这边来个白的，你看它的值为什么。默认值不可继承的是不是OK，然后呢。值的百分比称等于一麦积本身懂不懂？OK，比如说我来个百分比。

好image嘛，是不是叫什么。干什么？这叫这叫啊啊，那我是不是一直读错了啊，不管了啊好细节问题不要在意啊，来看一下我们说它是不是可以写百分比的，百分比是不是图片，是不是切割那张图片的，比如说我百分之三十三点。我不管了，33333就是1/3嘛。是不是他怎么切。是不是牵制你看问你把把这个东西，把这个东西切成一个九宫格，先几刀九刀。你在挖呢，就刀几刀试试，一刀两刀三刀四刀可以了，是不是九刀你不一个挖吗？是不是OK来看一下是不是只需要四刀啊，哎，来看一下，那其实它就有什么，它是有四个字的，懂不懂，只不过现在是个单词嘛。

单子你们差不多都应该知道什么意思。啊，四个方向都是这样，懂不懂就什么同时干嘛，第一刀你我的左边33.3%，第二刀你上边33%。第三刀。第四道。这个能不能理解啊，OK，来看一下是不是可以把我们怎么切出来，走你。有没有出来？切肯定是切出来跟刚刚不一样了，是不是这切成啥了，切的很漂亮了，是不是不满足，来看一下，你看。这个是不是对应上来了，这个是不是对应过来了，这个是不是对应过来了，这个是不是对应过来了，这个没没有对应，这个对应过来了，这个对应过来了，这个也对应过来了，这个也对应过来，只有中心点没对应，而且啊。

他做了拉伸，是不是你这个区域有多大，我必须再把你整个区域啊。是不是这样的，比如说干嘛我把这个边框给你们调调调成50PX来看一下。反正你虚度的，我就帮你占满。是不是这样的，可是我们说当中没填充不开心，是不是啊，怎么办？怎么让它填充啊，你要加什么。什么意思啊，填充的意思嘛，是吧，走你看一下填不填充。现在是不是把这张图整个的一一对应上去了，能不理解，只不过是不是有一个拉伸的效果啊，还是不开心，是不是我不叫你拉伸，我要干嘛平铺是不是，可是问你这个属性直线能不能理解它是干嘛的？这能理解了吧，默认指位段，默认这是百分百是不是？也就我不写它其实是百分百吧。不写为百分百是一个什么意思啊？百分百怎么写哦？四刀怎么切到？

是吧，一刀两刀。然后呢，三刀四刀切出来，是不是只有一个，他就把这一个干嘛。塞到这个角上面吧，也没有一一对应的关系了吧，就只有这什么四个角吧，懂不懂可是经过如果看我怎么切。好我干嘛，我比如说切四份是不是10%，要不要动好了，自己算20%，百分之。三十百分之四十来看怎么切的。能不能看懂，能不能看懂第一刀10%切的啥？17%的啥。怎么连我都看不懂啊，我来看个吧，看这个应该比较好看。

看这个feel就知道应该怎么切了。刷下。第一刀是切的谁的？第一刀切的是谁啊？是不知道，我这上面好像也没写吧，那怎么办？走规范吧。看到底怎么切的第一刀。它是有四个字啊，这四个字分别代表哪几个方向看。收到。有没有说说你看不懂为什么不是中文的？嗯，四个值分别来切什么？分别来控制切片的位置吧，如果没有特定的指面，它的值将会通过。其他的推出来。

中间值不会被边框使用，当设置非关键词被作被作为白色框是什么？一般就使用吧。嗯。切成四个角，怎么切啊？你们看有没有那个属性是这么去说的。属性的字也没说吧，他也没说吧，这就尴尬了。那这样吧，我们来看一看吧，他到底是怎么去切的，这样吧，我们第一个给33.333%，是不是其他的我都给了吗。零嘛是吧，来看看他到底是怎么玩的。OK，好像能看出来。第一刀切哪的上面的是不是我，我现在不要了。我现在不要掉了，这应该就能看出来了，是不是第一刀是不是只切了上面，其他都没有切吧，是不是好看第二刀切的。

嗯，是不是上面，看这个边框在哪，确实是上面了，是不是第一刀削，第一刀刮的就是上面的是不是OK。那看调到呢。掉到挂在哪边，好像是从这边开始的，上右下左是不是OK，那刚刚我们来看一下我们怎么切的10%。十。这样来吧，33.3333是不是来看看他到底怎么切。第一道场。第一张呢，上面是是上面应该怎么切，切了10%是不是，那是不是切个三个头出了是不是，看最终渲染成什么。三片什鬼啊，是不是三个头啊，是不是这样的？OK，来看一下这个。

你看是不是在哪，这能理解，这能理解吗？除非你把它切出九份来。是不是不然他就按照什么四份给你放呗。是不是在哪，你看上面是不是这个头，下面是不是下面是不是这个头啊，是不是这边放什么。这边放你33%的时候切，切的百分，你看切出来是不是一个完整的东西啊，是不是其实是有东西是什么覆盖掉的吧，因为我现在切出来是只只能切出来四份嘛，所以一般我们考虑起来我们就把它干嘛。考虑成干嘛，切成几半，你这边也不可能什么瞎切的吧，一般是不是有规则的去切他是不是就干嘛。切成状。切成九份嘛。是吧，这个能不能讲好，那切成九分之后我们来看，我们说如果你有非的话，相当于把当中这个做成背景放到什么，比如说里面去吧，相当于是一对应的吧，是吧，这能理讲现在能不能解这个波德纲一标讲三啊，这这个不璃纲一标叫什么硕士的一个关系啊，可以理解吧，可是性是不是拉伸了，好再来看属性叫什么。

不，士杠一该是什么？Repeat，看它是干嘛的？啊，其实它有一个repeat，有有什么。这个是不是拉伸的意思啊，比如说现在我看得上你干嘛平铺走脸。OK，是不是平铺了，可是这个平铺是不是他们干嘛，他会把一个完整的图形干嘛放成切一半放两边的，这种平铺方式喜不喜欢，不喜欢最好是什么？Round。只是不是完整的评分嘛，如果你不想要这个费的话，就给它干掉，那你的边框是不是就出来了，也就是说你让UI设计图的时候应该怎么设计。这。

几个位置？是不是应该去做一次设想？是不是如果你当初这个想要的话，做成背景图的话，你干嘛，你把这个让他把背景图放在这块。这能讲边框图片跟背景图片是不是可以放到一张图上去了，这个能讲好再来看，这个时候我们再来看。我们说你看如果你想这个角上面是不是也是拿到我们这个角是吧，你想你如果把这个换成海峰的头像是吧，这个换成雄健的头像，那你是不是一个带图像的边框就出来了是吧？这种都需要UI给你配合的去去设计的，根据你们的产品走怎么好看怎么走懂不懂，反正现在这个边框的样式是不是有了更多的选择了。这能不能理解啊，OK，那再来看。好，是不是还有一个叫玻璃面叫外啊，这个是干嘛用的是不是啊，OK，大家看现在这个边框的大小，我问你是不是根据我们这个波的外来的是不是好，那其实默认你如果不指定image的话，就是拿这个对不是，除非你把这个的。

什么？什么image？Y，你也设置一下吧，比如说你设置20TX是吧，OK，看整你边框是不是就变小了是吧，边框有没有变小，边框没有变小，边框图片的宽度变小，对边框还是50懂不懂，只不过边框图片所所占的是不是就是什么20了，这个能讲默认，你如果不写他的话，拿的就是博德啊，OK，看最后什么柏林麦干什么。这个是干嘛的？播的。什么鬼，什么I image？不不不，奥赛是不是OK，比如说给个P来看一下。

刷一下是往往外扩了，比如说我们来看这个纸。你看是不是越来越大，越来越大，边框是不是还在这，它是不是可以让你这个边框继续往外扩，看它能不能是个负值。复制有用吗？没有用，你看他只能是一个正直，也就是什么博个奥赛，只能看奥吗？只能是往外走的啊，他没有往往里收的这种效果，这能理解啊，OK，那这就是我们的边框图片，它让边框的样式有了更多的选择等等，也就是说这个边框的样式跟着你的图片走能不讲，而且你的背景图片也能不能放到你这个边框图片里面去。也可以放到它什么中心位置就行了，懂不懂，那如果有需求可以合并的话，你们想一想。是不是首先我边框有钥匙了，而且我背景我还有背景图吧，是不是我只要画一个请求。因为所有的图片都在什么一张图上，你要的信息都在一张图上，我也只发了一个请求嘛，那么讲，只不过这个请求可能稍微大一点嘛，啊，可是这个代价是很小的，这个可不可以理解啊，它会让你的边框有样式，让你的背景也比较好看懂吧，OK，那这需要给你UI去配合的啊，那UI如果不知道啊，那就比较难做了，OK，所以一个比较好一点的UI啊，一个公司必须要有一个比较好一点的UI。