介绍 {
,,,outline-style:,固体;
,,,outline-width:, 10 px;
,,,,边框色:红色;
} {
,,,:轮廓,10 px solid 红色;
} div {
,,,保证金:,100 px;
,,,宽度:,100 px;
,,,身高:,100 px;
,,,:轮廓,15 px solid # 545454;
,,,outline-offset:, -66 px;
边境:,,,,2 px solid # 545454;
}
小编给大家分享一下怎么使用css画一个文件上传图案,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
如下图,如果是你,你会怎么实现:
通常我们会通过字体图标来显示中间的加号,外层用一个div包裹即可,或者使用伪元素来模拟中间的一横一竖,这都比较麻烦。
其实我们可以直接使用div + css就可以实现。
轮廓属性大纲
大纲属性是用来设置一个或多个单独的轮廓属性的简写属性,例如。
轮廓有下面几个属性:
他们有一种简写形式:
<>强轮廓的特点
轮廓不占据空间,它们被描绘于内容之上。
可以做到下图的效果:
我发现,当设置outline-offset为负值的时候,轮廓会出现在div的内部,如果继续扩大其负值,最终轮廓会收缩成一个”?“加号,正好可以作为文件上传样式中间的加号。
这就有意思了,于是代码就来了:
outline-offset: -66 px;是关键,它表示轮廓距div边的距离,如果为负值则会往里面收缩,最后形成一个加号。具体上传样式的大小和轮廓的宽度都需要自己慢慢调整已达到大和谐。
需要注意的是:
容器得是个正方形
轮廓边框本身的宽度不能太小
看完了这篇文章,相信你对“怎么使用css画一个文件上传图案”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
