CSS边框图片补充--跟着李南江学编程

作者: 63537b720fdb | 来源:发表于2019-12-08 21:20 被阅读0次

CSS边框图片补充--跟着李南江学编程
CSS边框图片--跟着李南江学编程
CSS边框圆角--跟着李南江学编程
CSS边框图片练习--边框图片按钮--跟着李南江学编程
au_kate跟着李南江学习HTML5—CSS学习
CSS选择器--跟着李南江学编程
线性渐变--跟着李南江学编程
清除浮动--跟着李南江学编程
径向渐变--跟着李南江学编程
圣杯布局--跟着李南江学编程

一、fill

上一篇提到，slice会从四个方向根据给定的值往里推，然后截取图片，那么首先将九宫格中1、3、7、9（四个角）放到border的顶点中，再将2、4、6、8（四个角的夹角）放到border中，那么最后只剩一个5没被放到border中，

image.png

那么当我们想让5出现时，border-image-slice: 70 70 70 70 fill; 在slice属性的最后添加fill，中间的图片也能出现

image.png

二、border-image-outset:10px 20px 30px 40px; 上右下左

让border的背景图片超出border边框展示

image.png

三、连写方式

border-image: url(img/border.jpg) 70 fill stretch; 图片地址 slice值 fill 重复方式

image.png

CSS边框图片补充--跟着李南江学编程
一、fill 上一篇提到，slice会从四个方向根据给定的值往里推，然后截取图片，那么首先将九宫格中1、3、7、9...
CSS边框图片--跟着李南江学编程
一、形成border背景图片的原理边框不只可以设置颜色，还可以设置背景图片，当给边框设置背景图片后，backgr...
CSS边框圆角--跟着李南江学编程
1.什么是边框圆角？就是把矩形边框变成圆角边框，就叫做边框圆角。 2.设置边框圆角的格式 2.1 border-...
CSS边框图片练习--边框图片按钮--跟着李南江学编程
通过background-image-slice将border图片切割成九宫格，四个顶点图片固定，若border长...
au_kate跟着李南江学习HTML5—CSS学习
au_kate跟着李南江学习HTML5-CSS学习李南江老师的CSS视频讲解与小白老师的生动解释相结合，CSS的...
CSS选择器--跟着李南江学编程
伪类选择器操作的是被选中的对象 1.E:not(s) 选中的是div中类名不是.test的元素操作的对象是d...
线性渐变--跟着李南江学编程
渐变分为线性渐变和径向渐变线性渐变，从一个方向到另一个方向渐变径向渐变，从一指定位置向四周扩散渐变一、默认的渐...
清除浮动--跟着李南江学编程
一、为什么要清除浮动添加浮动的原因是不想让页面局限于标准流式排版（垂直排版），那么当我们想让浮动元素垂直排版时，...
径向渐变--跟着李南江学编程
一、径向渐变和线性渐变线性渐变：默认从上至下扩散径向渐变：默认从中心向四周扩散二、径向渐变的扩散方向 at+...
圣杯布局--跟着李南江学编程
圣杯布局就是三栏布局，左右两栏固定，中间一栏自适应我正在跟着江哥学编程,更多前端+区块链课程: www.it66...