CSS实现最简洁的四角边框
在前端有一句古话,叫能用CSS实现的就别麻烦JS,因为声明式的配置语言CSS相比于自由式的编程语言JS,更容易被编译器所优化,比如css渲染引擎会优先考虑gpu加速,因此CSS动画的性能往往高于JS动画,本文介绍在不需要html和js的配合的情况下,用纯css实现一个好看的四角边框。
用最节能的代码实现如图所示的,在大数据报表中非常常见的四角边框,有点类似Unicode中的制表符和直角括号:⌜ ⌝ ⌞ ⌟,有很多种办法来实现它,但最简洁的是利用边框图像(蒙版)+径向渐变(底图)来实现,其中径向渐变的椭圆的直径要略大于元素盒子的边长,椭圆内全透明,椭圆外则使用边框的颜色,径向渐变图在盒子中是长这样的:
通过调整椭圆的长轴和短轴来改变四角的长度,最后利用边框蒙版将不需要的部分盖住即可,注意border-image-slice和border-width设置成一样大,此外还可以利用border-image-outset来对边框进行缩放,往往需要让边框远离盒子一些更好看,比如:
border-image-source: radial-gradient(60% 60%, transparent 0px, transparent 100%, cyan 100%);
border-image-slice: 1;
border-width: 1px;
border-style: solid;
border-image-outset: 1cm;
只需要5行CSS就能实现,而且不需要增添额外的dom元素,性能卓越,还可以借此实现方括号:[ ] ⎵ ⎴,只要让椭圆的宽或高略小于盒子,让一边小于50%,另一边大于50%,这样相邻的2个角就能连接上,实现对边边框(请脑补逻辑上的椭圆)。所以说,能用CSS就别麻烦JS,JS有更重要的事情要做。
CSS实现最简洁的四角边框相关推荐
- html如何给图片加四周边框,css如何给div加上四角边框
先看效果图 HTML代码(注:view是微信小程序中的div,如果是html或者vue换成div即可): CSS代码: .a { width: 10px; height: 10px; position ...
- 使用css给div添加四角边框的方法
使用css给div添加四角边框的方法 div添加四角边框,一般写法,我们会在四角分别放一个小方块设置边框,来实现效果,但当我们使用vue,或者需要封装称组件时,例如大屏的展示,如果将边框也封单独的组件 ...
- CSS,点击去除虚线边框代码
/*CSS,点击去除虚线边框代码*/ a {outline: none;} a:active {star:expression(this.onFocus=this.blur());} :focus { ...
- 采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- CSS实现自适应的图片背景边框代码
代码简介: CSS漂亮的图片边框,边框是用背景图片修饰的,不过可以自适应大小,这点挺实用的,不论你的图片有多大,它始终显示在图片的外围,不会错位,这当然还要归功于CSS的功劳. 代码内容: View ...
- html边框有箭头,css简单实现带箭头的边框
css简单实现带箭头的边框 普通边框 .border { width: 100px; height: 50px; border: 1px solid red; } 实现由四个三角形组成的正方形 .tr ...
- [css] 怎么实现移动端的边框0.5px?
[css] 怎么实现移动端的边框0.5px? 一种是通过transform中的scaleborder: 1px solid red;transform: scaleY(.5);一种是通过meta vi ...
- [css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- html四边形的的框怎么编写,html知识点之利用css四边形切角并且加上边框
html知识点之利用css四边形切角并且加上边框 html知识点之利用css四边形切角并且加上边框 前言 这几个月做了很多前端工作,其中一个需求还是蛮头疼,UI给的图上面的四边形是一个带斜边的,直接用 ...
- html表格输入框怎么左移动,当我向CSS中的文本框添加边框时,HTML表单输入会移动...
我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动 当用户输入不正确的凭据到表 ...
最新文章
- 第二次作业 郭昭杰 201731062608
- 【数理知识】《数值分析》李庆扬老师-第5章-解线性方程组的直接方法
- 任正非:进军高端市场的同时,华为要防范未来竞争者从低端崛起
- 九、表达式求值(1)
- SVN merge(合并) 的三种方式
- Java初学者必知 关于Java字符串问题
- 格力干的?顾客京东上买到二手奥克斯空调 京东、奥克斯回应...
- POJ 3694Network(Tarjan边双联通分量 + 缩点 + LCA并查集维护)
- 现在每月五千块钱的收入,相当于七八十年代的多少钱?
- 【Spring实战】—— 1 入门讲解
- DLL注入——使用注册表
- 多看电纸书如何安装第三方软件(如微信读书、梅糖桌面、Eink桌面等)
- python从图片提取文字_用python提取图片文字
- 移动端应用视频小程序加密播放(存档)
- 双11还没买过瘾?亚马逊“真黑五”全球狂欢登场
- 《大数据时代》-[英]维克托.迈尔-舍恩伯格 肯尼斯.库克耶
- 大学生职业规划策划书
- 服装批发软件系统远程打印方法
- 关于利用入门JAVA制作简易RPG
- 【已解决】NO_PEERS_FOUND. Description: targets were not provided
热门文章
- 快捷方式查看系统的配置信息 使用dxdiag
- Python爬虫-bug处理办法(持续更新)
- Everedit软件下载、安装和运行(免注册)
- linu离线安装java1.8
- 【转载】NP完全问题——最小曼哈顿网络
- 单片机c语言多条件if函数的使用,3个条件的if函数怎么用
- Linux和Windows双系统gpt,Windows+Ubuntu双系统GPTMBR引导设置
- 苹果版赤潮可以用微信登陆吗_用swiftui中的苹果登录
- Springboot疫情防控下基于微信小程序的食堂订餐系统 毕业设计-附源码261620
- Turtlebot3-burger入门教程#foxy版#-树莓派4安装