应用css画1个文档提交图案设计

以下图，假如是你，你会如何完成：

一般大家会根据字体样式标志来显示信息正中间的加号，外层用1个div包裹便可；或应用伪元向来仿真模拟正中间的1横1竖，这都较为不便。

实际上大家能够立即应用div+css便可以完成。

轮廊特性outline

outline特性是用来设定1个或好几个独立的轮廊特性的简写特性 ， 比如 。

轮廊有下面几个特性：

{
    outline-style: solid;
    outline-width: 10px;
    outline-color: red;
}

她们有1种简写方式：

{
    outline: 10px solid red;
}

轮廊的特性

轮廊不占有室内空间，它们被勾勒于內容之上。

能够保证下图的实际效果：

我发现，当设定 outline-offset 为负值的情况下，轮廊会出現在div的內部，假如再次扩张其负值，最后轮廊会收拢成1个“➕”加号，恰好能够做为文档提交款式正中间的加号。

这就成心思了，因而编码就来了：

div {
    margin: 100px;
    width: 100px;
    height: 100px;
    outline: 15px solid #545454;
    outline-offset: ⑹6px;
    border: 2px solid #545454;
}

outline-offset: ⑹6px; 是重要，它表明轮廊距div边的间距，假如为负值则会往里边收拢，最终产生1个加号。实际提交款式的尺寸和outline的宽度都必须自身渐渐地调剂已做到大和睦。

必须留意的是：

器皿得是个正方形

outline 边框自身的宽度不可以很小

原文github库房详细地址：https://github.com/Daotin/front-end-notes/issues

总结

以上所述是网编给大伙儿详细介绍的应用css画1个文档提交图案设计，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！