当前位置： 首页 > news >正文

【前端demo】CSS border-radius可视化 原生实现

news 2026/5/17 0:41:59

文章目录

    • 效果
    • 原理
    • 代码

前端demo系列目录：https://blog.csdn.net/karshey/article/details/132585901

效果

在这里插入图片描述

参考：

Fancy Border Radius Generator (9elements.github.io)

https://border-radius.com/

CSS border-radius 新玩法(含可视化生成工具) - 鬼小妞 - 博客园 (cnblogs.com)

GitHub - florinpop17/app-ideas: A Collection of application ideas which can be used to improve your coding skills.

原理

border-radius的值为百分号：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{border:2px solid;padding:10px;width:300px;height:300px;border-top-left-radius: 25% 50%;border-bottom-right-radius: 25% 50%;
}
</style>
</head>
<body><div></div></body>
</html>

其中有css代码：

border-top-left-radius: 25% 50%;
border-bottom-right-radius: 25% 50%;

因此：

  • top在左边25%的地方开始有弧度
  • left在上面50%的地方有弧度
  • bottom在右边25%的地方有弧度
  • right在下面50%的地方有弧度
    在这里插入图片描述

值为px同理。

代码

  • 此代码的单位为px
  • 若想要为%的，将r[num] = event.target.value + 'px'改为r[num] = event.target.value + '%'
  • class中的one、two等数字是写样式（位置）用的
  • 每个input表单的data-index属性，可以用来得知是哪个子元素发生了onchange事件（事件委托在父元素），通过event.target.attributes[2].value获取data-index属性

不知道在哪的话可以输出event看看

class对应位置：

在这里插入图片描述
注意：

  • borderTopLeftRadius ：是上和左，即1和8
  • borderTopRightRadius ：是上和右，即2和3
  • borderBottomRightRadius ：是下和右，即5和4（注意顺序！）
  • borderBottomLeftRadius ：是下和左，即6和7
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS border-radius</title><style>.box {height: 400px;width: 400px;margin: 100px auto;position: relative;border: 1px solid #9E9E9E;background: linear-gradient(45deg, #00bcd4, #d135ec);}.item {width: 40px;height: 25px;background-color: #d1d0d0;border: 1px solid #9e9e9e;position: absolute;}.one {top: -35px;}.two {top: -35px;right: 0;}.there {right: -55px;}.four {right: -55px;bottom: 0;}.five {bottom: -35px;right: 0;}.six {bottom: -35px;}.seven {left: -55px;bottom: 0;}.eight {left: -55px;}</style>
</head><body><div class="box" id="box" onchange="Onchange(event)"><input type="text" class="item one" data-index="1"><input type="text" class="item two" data-index="2"><input type="text" class="item there" data-index="3"><input type="text" class="item four" data-index="4"><input type="text" class="item five" data-index="5"><input type="text" class="item six" data-index="6"><input type="text" class="item seven" data-index="7"><input type="text" class="item eight" data-index="8"></div>
</body></html><script>// 左上18// 右上23// 下右54// 左下67let r = new Array(9).fill(0);function Onchange(event) {// 事件委托 获取子元素的data-index：event.target.attributes[2].valuelet num = event.target.attributes[2].valuer[num] = event.target.value + 'px'console.log(r)borderRadiusChange()}function borderRadiusChange() {let box = document.getElementById('box')let rr = new Array()rr.push(r[1], r[8])box.style.borderTopLeftRadius = rr.join(' ')box.style.borderTopRightRadius = r.slice(2, 4).join(' ')// 清空数组rr.length = 0rr.push(r[5], r[4])box.style.borderBottomRightRadius = rr.join(' ')box.style.borderBottomLeftRadius = r.slice(6, 8).join(' ')}</script>

相关文章：

【前端demo】CSS border-radius可视化 原生实现

文章目录 效果原理代码 前端demo系列目录&#xff1a;https://blog.csdn.net/karshey/article/details/132585901 效果 参考&#xff1a; Fancy Border Radius Generator (9elements.github.io) https://border-radius.com/ CSS border-radius 新玩法(含可视化生成工具) - …...

编程日记 2023/8/31 16:21:37

Qt Creator使用Clang Format方法

Qt Creator使用Clang Format 习惯性的想格式化代码&#xff0c;发现Qt Creator默认居然是没有代码格式化的&#xff0c;只有一个缩进。 Qt Creater中有个插件&#xff1a;beautifier&#xff0c;在"帮助->关于"插件中&#xff0c;开启“Beautifier”即可&#xf…...

编程日记 2023/8/31 16:20:36

智慧矿山2.0：煤矿智能化综合管理AI大数据监管平台建设方案设计

一、行业背景 能源与煤矿是我国国民经济的重要物质生产部门和支柱产业之一&#xff0c;同时也是一个安全事故多发的高危行业&#xff0c;施工阶段的现场管理对工程成本、进度、质量及安全等至关重要。煤矿智能化既是未来趋势&#xff0c;更是产业发展需求&#xff0c;建设智慧…...

编程日记 2023/8/31 16:18:33

Linux——（第一章）Linux的入门

VMwear workstations下载及安装 Ubuntu server 18.04安装 VScode下载与安装 使用VS Code连接远程服务器 MobaXterm的下载安装及远程连接 Filezila的下载、安装与使用&#xff08;向服务器传输文件&#xff09; 目录 1.概述 2.Linux和Windows的区别 3.VM的安装与使用 1.概述 …...

编程日记 2023/8/31 16:17:31

十六、策略模式

一、什么是策略模式 策略&#xff08;Strategy&#xff09;模式的定义&#xff1a;该模式定义了一系列算法&#xff0c;并将每个算法封装起来&#xff0c;使它们可以相互替换&#xff0c;且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式&#xff0c;它通过对算法…...

编程日记 2023/8/31 16:16:30

Python装饰器

什么是python装饰器&#xff1f; 顾名思义&#xff0c;从字面意思就可以理解&#xff0c;它是用来"装饰"Python的工具&#xff0c;使得代码更具有Python简洁的风格。换句话说&#xff0c;它是一种函数的函数&#xff0c;因为装饰器传入的参数就是一个函数&#xff0…...

编程日记 2023/8/31 16:15:28

【Spring】使用自定义注解方式实现AOP鉴权

AOP&#xff0c;是一种面向切面编程&#xff0c;可以通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术。 在软件开发中&#xff0c;鉴权&#xff08;Authentication&#xff09;是一项非常重要的安全措施&#xff0c;用于验证用户身份和权限。在应用程序中&…...

编程日记 2023/8/31 16:14:27

Go几种读取配置文件的方式

比较有名的方案有 使用viper管理配置[1] 支持多种配置文件格式&#xff0c;包括 JSON,TOML,YAML,HECL,envfile&#xff0c;甚至还包括Java properties 支持为配置项设置默认值 可以通过命令行参数覆盖指定的配置项 支持参数别名 viper[2]按照这个优先级&#xff08;从高到低&am…...

编程日记 2023/8/31 16:13:26

每日一题（反转链表）

每日一题&#xff08;反转链表&#xff09; 206. 反转链表 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 可以定义一个新的newhead结构体指针。再定义cur指针和next指针互相配合&#xff0c;将原链表中的节点从头到尾依次头插到newhead链表中&#xff0c;同时更…...

编程日记 2023/8/31 16:12:24

某人事系统架构搭建设计记录

首发博客地址 https://blog.zysicyj.top/ 先大致列一下基础情况 架构必须是微服务 场景上涉及大量查询操作&#xff0c;分析操作 存在临时大量写入的场景 并发并不高 对高可用要求较高&#xff0c;不能挂掉 对安全要求高 要能过等保测试等三方测试 使用人数并不多&#xff0c;十…...

编程日记 2023/8/31 16:11:23

uniapp 实现切换tab锚点定位到指定位置

1.主要使用uniapp scroll-view 组件的scroll-into-view属性实现功能 2.代码如下 <scroll-view:scroll-into-view"intoView"><u-tabsclass"tabs-list"change"tabChange":list"tabList"></u-tabs><view id"1&…...

编程日记 2023/8/31 16:10:21

华纳云：ssh登录22号端口拒绝连接Ubuntu?

如果您在尝试使用SSH登录Ubuntu服务器的时候遇到了22号端口拒绝连接的问题&#xff0c;您可以尝试以下几个步骤来解决问题&#xff1a; 确认SSH服务已启动&#xff1a; 确保Ubuntu服务器上的SSH服务已经正确启动。您可以在服务器上运行以下命令来检查SSH服务的状态&#xff1a…...

编程日记 2023/8/31 16:09:19

python conda实践 sanic框架gitee webhook实践

import subprocess import hmac import hashlib import base64 from sanic.response import text from sanic import Blueprint from git import Repo# 路由蓝图 hook_blue Blueprint(hook_blue)hook_blue.route(/hook/kaifa, methods["POST"]) async def kaifa(req…...

编程日记 2023/8/31 16:08:17

LeetCode——无重复的最长子串（中等）

题目 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。示例 2: 输入: s "bbbbb" 输出: 1 解释: 因为…...

编程日记 2023/8/31 16:07:16

【SQL】关系模型与查询和更新数据

一、关系模型 1.1 主键 主键是关系表中记录的唯一标识。主键的选取非常重要&#xff1a;主键不要带有业务含义&#xff0c;而应该使用BIGINT自增或者GUID类型。主键也不应该允许NULL。 可以使用多个列作为联合主键&#xff0c;但联合主键并不常用。 1.2 外键 FOREIGN KEY …...

编程日记 2023/8/31 16:06:13

【Centos8_配置单节点伪分布式Spark环境】

安装centos8 jdk部署伪分布式spark环境 安装Centos8 环境下的JDK 下载jdk linux版本 下载链接&#xff1a; jdk-8u381-linux-x64.tar.gz 将该文件上传到Centos8 主机 部署配置jdk&#xff08;java8&#xff09; # 解压到指定路径 [lhangtigerkeen Downloads]$ sudo tar …...

编程日记 2023/8/31 16:05:12

【软考】系统集成项目管理工程师（三）信息系统集成专业技术知识①【16分】

一、系统集成的特点 官方解释&#xff1a; 1、信息系统建设的内容主要包括设备采购、系统集成、软件开发和运维服务等&#xff1b; 2、信息系统集成是指将计算机软件、硬件、网络通信、信息安全等技术和产品集成为能够满足用户特定需求的信息系统&#xff1b;显著特点如下&am…...

编程日记 2023/8/31 16:04:11

揭秘特权账号潜在风险，你中招了吗？

什么是特权账号&#xff1f; 特权账号指在企业运营过程中&#xff0c;为相关业务运营、系统管理、系统运维等人员赋予的系统维护、权限增加、数据修改删除、导出等高级权限的系统账号。这些账号多数连接企业核心资源&#xff0c;保障企业内部各项业务正常运作。然而&#xff0…...

编程日记 2023/8/31 16:03:09

线性代数的学习和整理13: 定义域，值域，到达域 和单射，满射，双射，反函数，逆矩阵

目录 1 函数与 向量/矩阵 2 初等数学的函数 2.1 函数 2.2 函数的定义&#xff1a;定义域 →映射→ 值域 3 高等数学里的函数&#xff1a;定义域和陪域/到达域&#xff08;非值域&#xff09;的映射关系 3.1 函数 3.2 单射&#xff0c;满射&#xff0c;双射等都是针对…...

编程日记 2023/8/31 16:02:08

深入MaxCompute -第十一弹 -QUALIFY

简介&#xff1a; MaxCompute支持QUALIFY语法过滤Window函数的结果&#xff0c;使得查询语句更简洁易理解。Window函数和QUALIFY语法之间的关系可以类比聚合函数GROUP BY语法和HAVING语法。 MaxCompute&#xff08;原ODPS&#xff09;是阿里云自主研发的具有业界领先水平的分…...

编程日记 2023/8/31 16:01:07

用STM32F103C8T6和HC-05蓝牙模块，从零DIY一辆蓝牙遥控小车（附完整代码与MIT App Inventor教程）

从零打造STM32蓝牙遥控小车&#xff1a;硬件配置到APP开发全指南 项目背景与核心价值 对于嵌入式开发初学者来说&#xff0c;理论知识和实际项目之间往往存在一道难以跨越的鸿沟。而一个完整的硬件项目实践&#xff0c;恰恰是填补这一空白的最佳方式。基于STM32F103C8T6和HC-05…...

编程新知 2026/5/17 0:36:48

别再只会`cmatrix`了！解锁Linux终端屏保的10种炫酷玩法（含快捷键大全）

终端美学革命&#xff1a;10种cmatrix高阶玩法与快捷键全解析 当绿色代码雨第一次在终端流淌而下时&#xff0c;那种黑客帝国般的视觉冲击令人难忘。但你是否知道&#xff0c;这个看似简单的cmatrix命令背后隐藏着一个可编程的视觉艺术工具箱&#xff1f;本文将带你突破基础用法…...

编程新知 2026/5/17 0:17:57

3步掌握ADB驱动安装：Windows平台最简Android连接方案

3步掌握ADB驱动安装&#xff1a;Windows平台最简Android连接方案 【免费下载链接】Latest-adb-fastboot-installer-for-windows A Simple Android Driver installer tool for windows (Always installs the latest version) 项目地址: https://gitcode.com/gh_mirrors/la/Lat…...

编程新知 2026/5/16 23:39:06

告别默认丑图表！Winform Chart控件从拖入到美化的保姆级实战（C# .NET Framework）

告别默认丑图表&#xff01;Winform Chart控件从拖入到美化的保姆级实战&#xff08;C# .NET Framework&#xff09; 刚接触Winform Chart控件的开发者&#xff0c;往往会被默认生成的图表样式震惊——拥挤的坐标轴、刺眼的网格线、毫无美感的配色&#xff0c;仿佛瞬间回到Wind…...

编程新知 2026/5/16 23:20:02

仅0.3%用户掌握的胶片叙事技巧：用Midjourney实现“过期胶卷”时间衰减效果（含Exif元数据欺骗指令集）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;胶片叙事与数字时代的时间诗学 胶片影像的物理性——帧率、显影时长、机械快门延时——曾将时间锚定为可触摸的物质存在&#xff1b;而数字媒介则以纳秒级采样、无损复制与非线性剪辑&#xff0c;将时间…...

编程新知 2026/5/16 22:59:33

AI技能开发框架实战：从标准化契约到主流AI工具集成

1. 项目概述与核心价值最近在GitHub上看到一个挺有意思的项目&#xff0c;叫Renol1/skill-creator-pro。光看名字&#xff0c;你可能会觉得这又是一个“技能创建器”&#xff0c;但仔细研究它的代码和设计思路&#xff0c;你会发现它远不止于此。这个项目本质上是一个面向开发者…...

编程新知 2026/5/16 22:45:22

Raspberry Pi Imager终极指南：快速上手树莓派系统安装

Raspberry Pi Imager终极指南&#xff1a;快速上手树莓派系统安装 【免费下载链接】rpi-imager The home of Raspberry Pi Imager, a user-friendly tool for creating bootable media for Raspberry Pi devices. 项目地址: https://gitcode.com/gh_mirrors/rp/rpi-imager …...

编程新知 2026/5/16 22:32:45

MongoDB 4.4+ 版本后，手把手教你搞定mongodump独立安装与配置（附环境变量设置）

MongoDB 4.4独立工具链部署指南&#xff1a;从零构建mongodump备份环境 当你在全新的Linux服务器上部署了MongoDB 4.4或更新版本&#xff0c;准备执行例行数据库备份时&#xff0c;在终端输入熟悉的mongodump命令却只得到command not found的响应——这不是你的操作失误&#…...

编程新知 2026/5/16 22:08:49

Taotoken Token Plan套餐在实际开发中的成本控制体感

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken Token Plan套餐在实际开发中的成本控制体感 1. 套餐选择与预算锚定 在项目开发初期&#xff0c;团队或个人开发者面临的…...

编程新知 2026/5/16 21:57:44

从零到商用：用ElevenLabs打造粤语播客AI主播——12小时实测对比Azure/Coqui/TTS开源方案，成本降63%，交付提速4.8倍

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;从零到商用&#xff1a;用ElevenLabs打造粤语播客AI主播——12小时实测对比Azure/Coqui/TTS开源方案&#xff0c;成本降63%&#xff0c;交付提速4.8倍 粤语语音合成的三大瓶颈 传统方案在粤语TTS上长期…...

编程新知 2026/5/16 21:04:53