get新技能任意形状border-radius

最新推荐文章于 2025-07-29 15:11:48 发布
最新推荐文章于 2025-07-29 15:11:48 发布
阅读量219 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/learn_daydayUp/article/details/122212541
本文分享了如何使用最新的border-radius属性实现左上角自定义弧度的圆形边框，包括百分比设置和多种形状组合实例。从简单的圆角调整到复杂形状的设计，帮助开发者提升UI效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

学习了新的border-radio新写法
1.左上角任意弧度的圆角，可以自己调

width: 200rpx;
height: 200rpx;
border: 1px solid #ccc;
border-top-left-radius: 30%80%;

在这里插入图片描述
2.

width: 200rpx;
height: 200rpx;
border: 1px solid #ccc;
border-radius: 0%50%0%0%;

在这里插入图片描述
3.自定义形状

width: 200rpx;
height: 200rpx;
border: 1px solid #ccc;
border-radius: 30%50%70%;

在这里插入图片描述

挖博工
关注
如何用border-radius画出27种图形
03-03 1914
我不是很喜欢写博客，这也是我第一篇技术博客，因为很耗时间，这里总结了一些常用的利用border-radius做的一些图形，如果不清楚border-radius的用法请百度。 style> body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 { margin: 0; padding: 0; }
前端三件套知识点
二氧化硅.的博客
01-11 2902
前端三件套知识点
利用border-radius属性写个简单的左右内弧,上下外弧的框
ly272864318的专栏
09-18 6265
很久没有写博客了，虽然写的博客质量确实也不咋地 但本着聊胜于无，又或者是对自己所掌握的技术一个整理，还是可以写写 今天一个在网上认识的朋友问我一个技术上的小问题，用样式写一个图形，图形如下：   图形的结构很清晰、简单；就是上下一个的圆角，左右是向内的一个弧形； 圆角我们都知道能通过css3的圆角属性border-radius来实现； 剩下的就在于左右两边的弧形了； 很可惜的就
CSS3 Border-radius
wind14的博客
05-07 1138
border-radius属性 可以给任何元素设置圆角 而border-radius设值有许多种方式，下面实例给大家演示设值 默认 border-radius: none;<!DOCTYPE html> <html> <head> <title>边框属性圆角矩形边框</title> <style type="text/css"> .b1{
css圆角边框
qq_43667537的博客
10-27 340
1、圆角边框使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .yuanxing
html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
weixin_35907598的博客
06-04 5125
在css3之前，要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里：http://www.hicss.net/css-practise-of-image-round-box/)。实现过程很繁琐，但CSS3的到来简化了实现圆角的方式。CSS3实现圆角需要使用border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。1234-webkit-border-ra...
综合一
刘群智的博客
07-27 4427
自我介绍 左固定右自适应布局 这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局： &lt;div id="outer"&gt;   &lt;div id="sidebar" style="height:240px;"&gt;固定宽度区&lt;/div&gt;   &lt;d
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
英语四级单词
xxiyy0411的博客
12-18 2万+
// ==UserScript== // @name 背单词 // @description 边上网边刷英语四级单词 // @namespace Xiaomaxin // @version 1.31 // @author Xiaomaxin // @include * // @require http://cdn.bootcss.com
【图形学入门】：掌握C语言图形绘制，以太极图为例深入探讨
!... # 摘要 本文全面探讨了图形学与C语言编程在绘制太极图方面的应用和技巧。第一章介绍了图形学与C语言的基础知识，第...最后一章则讨论了图形学的未来趋势，包括新兴技术的影响、研究的新方向和对图形学从业者的建议。
border-radius:50%及超过50%的表现形式
CSU_Zipple的博客
09-24 2933
border-radius:50%和100%的区别 50%与100%表现一样是因为当临角两个弧半径之和超过临接边的长度时，浏览器会按照两个半径的比例缩小至刚好等于临接边的长度。 比如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
解决border-radius：50% 不圆的方法（由于使用了rem）
weixin_42060658的博客
12-04 6876
在写移动端的web页面的时候，发现使用了 border-radius 属性，在pc端正常显示，在手机端却发现无法不圆， 后面在网上查了一下，使用了rem单位设置了宽高，就会出现这种情况，解决方案有两种，一种是把rem换成px单位，另外一种是使用svg的方式 <svg class="back"> <!-- cx: 中心点的x轴的坐标，cy: 中心点的y轴坐标，r...
图片底部圆弧（border-radius的各种形状）
想飞的猪的博客
10-23 1万+
  1.图片底部圆弧 直接看代码；里面有注释： &lt;!DOCTYPE HTML&gt; &lt;html lang="en-US"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="
微信小程序中border-radius设置之后图片四个角的弧度不一样
xiaosheng
09-25 1万+
今天在写小程序的时候给图片设置圆角，可是一直出来的效果都是上面两个角的弧度跟下面两个角的弧度是不一样的，找了很久也没有发现问题在哪，最后试出来是padding-top的问题，把padding-top换成margin-top就好使了，也不知道原因是什么 ...
微信小程序wxss border及border-radius属性
UFO00001的博客
06-01 3万+
border-radius: none　｜　length{1,4} [/ length{1,4}  其中每一个值可以为 数值或百分比的形式。  length/length　第一个lenght表示水平方向的半径，而第二个表示竖直方向的半径。  如果是一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。  如果是两个值，那么 top
微信小程序万能模板（tabBar\openid\授权登录\云开发之一个云函数实现云数据库增删查改！）
m0_51907564的博客
10-18 1052
微信小程序万能模板。首先，一般来说做一个微信小程序第一步就是分析功能，建立依据功能划分tabBar;其次，小程序少不了用户登录，这是小程序的一个基本功能；再次，在记录用户信息和行为时我们需要用到能够唯一标识用户身份的openid；最后也是最重要的，小程序的一切功能都离不开数据库的“增删查改”操作，这里用很简洁的方式将云数据库的增删查改封装起来，简化代码，便于应用。
border-radius的一种经典使用(上凸边框）
Syleapn的博客
03-22 3364
对于border-radius，大家应该都很熟悉->为元素添加圆边框。所以，此处不在讲解border-radius的语法，不懂的戳这里，http://www.w3school.com.cn/cssref/pr_border-radius.aspw3cschool讲的很详细~ 下面我就利用border-radius添加圆边框这个功能实现以下效果-》向上凸出的弧线（红色线）-》此效果利...
解锁CSS超能力：::before和::after伪元素完全指南
最新发布
ttod的博客
07-29 324
解锁CSS超能力：::before和::after伪元素完全指南
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
cybersnow精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件
07-28 1349
它以精准的计算为基石，以透明的流程为纽带，在保障酒店运营秩序的同时，为顾客带来了更优质的服务体验，成为酒店押金原路退回系统中不可或缺的核心组件。从顾客角度来看，房费押金计算器带来的是透明化的消费体验。而房费押金计算器通过预设的算法逻辑，能在顾客输入房费金额后，自动根据酒店设定的押金比例（如房费的 1.5 倍或 2 倍）生成押金金额，再将两者相加得出总支付金额，且所有数值均精确到小数点后两位，完全符合财务结算的规范要求。掌握房费押金计算器的开发与应用逻辑，对撰写相关领域的毕业论文具有多重好处：​。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值