html布局四个正方形,分享一个css小技巧，实现给正方形的四个角设置小方块的方法...

项目的UI设计中有这样的样式，一开始用的背景图，简单粗暴，后来在其他地方出了问题，因为是背景图的原因，这个框框被拉长了后小方块的宽度也变宽了，然后想用纯css实现，百度居然没查到类似的东东，后来在umi的交流群里有个牛人给我指点了下 css backgrund: linear-gradient渐变属性可以实现，因为它可以设置渐变从哪开始，这就可以让我们实现4个顶点的位置定位咯，上代码：

html

{children}

css.fw-titleBar {

width: 100%;

display: inline-block;

position: relative;

background: linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left top,

linear-gradient(to left,#00BDFF,#00BDFF) no-repeat right top,

linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left bottom,

linear-gradient(to left,#00BDFF,#00BDFF) no-repeat right bottom;

background-size:8px 8px,8px 8px,8px 8px,8px 8px;

padding: 8px 0;

&::before{

content: '';

width: calc(100% - 30px);

height: calc(100% - 30px);

background-color: #00BDFF4D;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

z-index: -1;

}

.fw-titleBar-content{

width: 100%;

height: 100%;

display: inline-flex;

position: relative;

justify-content: space-between;

align-items: center;

border-top: 1px solid #00BDFF4D;

border-bottom: 1px solid #00BDFF4D;

padding: 10px 25px;

}

当然你也可以在

linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left top 30px

像这样来设置位置

html布局四个正方形,分享一个css小技巧，实现给正方形的四个角设置小方块的方法...相关推荐

今天来给大家分享一个实际又有用的微信发长视频和语音的小功能。
关注我们获得更多内容今天来给大家分享一个实际又有用的微信发长视频和语音的小功能. 大家都知道,我们在发朋友圈小视频的时候,只能发不超过10秒钟的短视频,再长一点时间的视频就需要编辑到10秒以内才能发 ...
分享一个没有捆绑软件的、非ghost系统的最纯净安装window7的方法
如何安装,或者重装一个无预安装捆绑软件.未被修改过的.非ghost文件安装的Windows7系统,请看下文. 老规矩,话就不多说了,先上图. 这是系统安装之后的桌面,除了一个垃圾筐什么都没有. 从开始 ...
linux小技巧-如何修改IP（四种方法）
目录项目场景: 方法分析及步骤介绍原因分析: 解决方案: 项目场景: 项目上经常遇到修改IP的情况,这里总结一些各个情况下修改IP的方法,尤其时有时候没有主机屏幕显示,借助于命令行的方式修改IP ...
分享一个查询快递物流单号的方法
随着快递的盛行,商家每天需要查询很多快递公司的单号,那么如果一个个去官网查询物流的话,相对来说会比较麻烦.那么今天小编给大家分享一个新的技巧,下面一起来试试,希望能给大家带来帮助. 需要哪些工具? 快 ...
分享一个最近github上比较热门的javaScript-questions
github:https://github.com/lydiahallie/javascript-questions 是一些从基础到进阶的JS题目,也包括一些ES6的题目.这里面也有中文翻译的版本哟! ...
PDF转图片怎么转？分享两种转换小技巧
如何将PDF文件内容转换成图片呢?PDF文件在办公过程中十分常见,很多时候我们为了能更加方便的使用文件中的内容,会需要把PDF转换成图片来保存使用,因为图片格式的文件更加容易阅读和携带.很多小伙伴不知 ...
Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue - [object Object]
在开发模式下渲染出的Angular页面包含了很多形如下图ng-reflect-的html属性,很多时候其值都为[object Object]. 如果处于调试目的,需要在Chrome开发者工具里观察这些 ...
layer 关闭一个弹窗打不开新的的弹窗_电脑小技巧关闭FF弹窗
电脑小技巧--电脑做无线热点电脑小技巧--U盘坏了如何修复电脑小技巧--自动维护计划.任务关闭.禁用电脑小技巧--预防U盘中毒电脑小技巧--提高U盘读写速度电脑小技巧--调整引导高级选项加快 ...
禁止电脑移动某个指定文件_电脑小技巧-- 分享个简洁的系统清理工具
电脑小技巧--电脑做无线热点电脑小技巧--U盘坏了如何修复电脑小技巧--自动维护计划.任务关闭.禁用电脑小技巧--预防U盘中毒电脑小技巧--提高U盘读写速度电脑小技巧--调整引导高级选项加快 ...

html布局四个正方形,分享一个css小技巧，实现给正方形的四个角设置小方块的方法...

html布局四个正方形,分享一个css小技巧，实现给正方形的四个角设置小方块的方法...相关推荐

最新文章

热门文章