CSS 圆角

最新推荐文章于 2024-08-29 09:00:00 发布
最新推荐文章于 2024-08-29 09:00:00 发布
阅读量96 收藏
点赞数
原文链接：http://www.cnblogs.com/lszw/p/10706916.html
版权

css的border-radius属性可以实现圆角、圆形、椭圆形。

实现上述圆角的前提是盒子要有边框。

规则圆角

下面的示例演示了圆角、赛道、圆形，我们先看效果图。

下面是实现的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >圆角</ title >
     < style >
         div{
             margin:20px;
         }
         div.one{
             width:50px;
             height:50px;
             border:1px solid #333;
             border-radius:7px;
         }
         div.two {
             width:120px;
             height:50px;
             border:1px solid #333;
             border-radius:50px;
         }
         div.three {
             width:120px;
             height:120px;
             border:1px solid #333;
             border-radius:120px;
         }          
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 >
< div class = "one" ></ div >
< div class = "two" ></ div >
< div class = "three" ></ div >
</ body >
</ html >

下面来说明border-radius属性：

  • 它的值 最大是盒子的最小边长，如第二个图形，最小边长是50px高，不管border-radius属性的值是200，还是500，border-radius属性的值最终都是50px，即盒子的最小边长高的那边50px.
  • border-radius 在指定一个值是，它指的是4个角的值。包括：
    • border-top-right-radius
    • border-bottom-right-radius
    • border-bottom-left-radius
    • border-top-left-radius

不规则圆角

通过为4个不同的角设置不同的值可以实现不对称的形状。

  •    border-top-right-radius
  •    border-bottom-right-radius
  •    border-bottom-left-radius
  •    border-top-left-radius

这4个属性同时有两个值，如果指定一个值，那么两个值都相同。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >圆角</ title >
     < style >
         div{
             margin:20px;
         }
         div.one{
             width:50px;
             height:50px;
             border:1px solid #333;
             border-radius:1em 2em 1em 2em;
         }
         div.two {
             width:120px;
             height:50px;
             border:1px solid #333;
             border-radius:1em 4em 1em 2em / 2em 1em 2em 1em;
         }
         div.three {
             width:120px;
             height:120px;
             border:1px solid #333;
             border-top-right-radius: 120px 30px;
             border-top-left-radius:70px 50px;
             
         }          
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 >
< div class = "one" ></ div >
< div class = "two" ></ div >
< div class = "three" ></ div >
</ body >
</ html >

计算结果：

转载于:https://www.cnblogs.com/lszw/p/10706916.html

weixin_30591551
关注
微信小程序 css圆角,微信小程序界面设计小程序中CSS3样式精通课程-边框-border-radius 圆角边框...
weixin_36116139的博客
08-04 1550
border-radius 圆角边框通用语法浏览器支持微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua 定义和用法border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。提示：该属性允许您为元素添加圆角边框！默认值： 0继承性： no版本： CSS3Jav...
微信小程序悬浮半透明圆角框
YXun1111314的博客
08-09 2879
微信小程序悬浮半透明圆角框
css圆角属性
weixin_30911451的博客
07-19 1198
看了为昨天一篇博文【asp.net,对于一个有点经验的猴子,我的要求高么?】做点解释 才发现也不会玩圆角，楼主的2个题目也搞不出来，于是查阅后总结一下，学习学习，不过这玩意是不是不支持ie8啊 反正在哥机器上 就没成功显示过 圆角效果，首先我们应该来创建一个DIV和简单的CSS吧。 css3 圆角 <body><div id="box"></div&g...
CSS 设置圆角，这些便捷技巧你知道吗
大剑师兰特的GIS世界
05-23 1814
CSS圆角主要通过`border-radius`属性来实现，它可以让你轻松地为元素的边角添加弧度，使界面看起来更加友好和现代化。以下是一些关于`border-radius`的使用场景、示例代码及注意事项的详细介绍
CSS系列之圆角边框（CSS3）
热门推荐
老__L的博客
01-30 1万+
本文主要介绍CSS的border-bottom-left-radius、border-bottom-right-radius、border-radius、border-top-left-radius、border-top-right-radius属性。圆角边框（CSS3）
css圆角
xjj19999272的博客
05-25 4011
圆角 border-radius属性 border-radius属性的值通常为px单位，表示圆角的半径。示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
前端必知必会-CSS圆角
qq_24018193的博客
08-29 1699
本文介绍了CSS圆角的使用，如有问题欢迎私信和评论。
CSS圆角
mss_vogel的博客
02-23 266
中吾规者谓之圆。——《墨子·天志》 在逆战班中学习到了，如何利用CSS将一个矩形磨平了它的棱角： CSS3圆角只需设置一个属性：border-radius。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有CSS度量值都可以使用：em、px、百分比等等。比如下方是一个div做的方框： 只需要设置一个圆角半径为50px： 就变成了四个为50px的圆角图形： border-radius可以同...
css圆角样式制件代码示例(css设置圆角)
09-25
圆角可能会给页面的实现带来一些难度，比如，它可能需要为每个角使用一张图片，但是这可能会引起某些表现上的...在WebKit中被支持的CSS3的”border-radius”属性让实现圆角变得非常简单，它只需要几行简单的CSS代码，如
CSS 圆角示例详细教程
04-03
### CSS 圆角示例详细教程 #### 一、引言 随着网页设计技术的不断发展，用户对于网站的美观度及交互体验的要求越来越高。CSS3的出现极大地丰富了网页的表现形式，其中圆角效果（Rounded Corners）是增强视觉吸引力...
css教程制作css圆角边框(兼容全部浏览器)
09-25
CSS 教程 - 制作 CSS 圆角边框（兼容全部浏览器） CSS 圆角边框的概念 在现代 Web 设计中，圆角边框是一个非常常见的设计元素，用于添加视觉效果和美化网页的外观。然而，制作圆角边框时需要考虑浏览器的兼容性，...
div css圆角代码各种圆角表格_圆角边框css圆角
11-11
在网页设计中，`div` 和 `CSS` 是不可或缺的部分，尤其当涉及到界面美观和用户体验时，圆角设计显得尤为重要。圆角边框不仅能够使网页元素看起来更加柔和，还能提升整体设计的现代感。本篇文章将深入探讨如何使用 `...
css 圆角边框
09-25
CSS圆角边框指的是在网页布局中，元素的边框可以设置为圆角形式，而不是传统直角的样式。这在创建用户界面元素时，如按钮、卡片等，能够带来更为美观和友好的视觉效果。CSS3的出现让这一功能变得简单，因为它提供了...
基于Go语言的疫情物资信息平台服务端设计源码
09-25
该项目是一款采用Go语言编写的疫情物资信息平台服务端源码，包含57个文件，其中包括43个Go源文件、4个XML文件、2个Git忽略文件以及其他必要的配置和管理文件。该平台旨在提供疫情物资的实时信息管理和数据交换服务。
基于PHP的AquaticProduct水产品质量溯源系统设计源码
09-25
该系统是一款基于PHP开发的水产品质量溯源源码，综合运用HTML、CSS、JavaScript等技术，并涉及C和C语言，共包含616个文件。文件类型丰富，涵盖PHP、HTML、CSS、JavaScript等，旨在实现水产品的全流程质量追溯管理。
基于Java语言的Android版QQ音乐仿IOS自定义主题色设计源码
09-25
该项目是一款Java编写的Android仿IOS风格QQ音乐应用源码，包含54个文件，涵盖20个XML布局文件、12个PNG图片资源、8个Java源代码文件、3个Git忽略文件、3个Gradle构建文件、2个属性配置文件、1个项目许可证文件、1个Markdown说明文件、1个项目配置文件和1个JAR库文件，实现了自定义主题色的功能。
卸妆水市场迎来爆发式增长，预计到2024年，中国卸妆水市场规模将达到248.8亿元
09-25
卸妆水市场迎来爆发式增长，预计到2024年，中国卸妆水市场规模将达到248.8亿元 在追求美丽与健康的今天，卸妆水已从单纯的清洁工具跃升为日常护肤不可或缺的一环。随着消费者对美容护肤认知的深化，卸妆水市场正经历一场前所未有的变革。消费升级、品质追求、环保理念……这些关键词正交织成卸妆水行业发展的壮丽画卷。那么，2024年的卸妆水行业又将如何演绎这场美丽盛宴？ 市场概况 近年来，中国卸妆水市场规模持续扩大。2017年中国卸妆水市场规模达到125.6亿元，随后几年中持续增长，到2019年已达到181.2亿元。预计到2024年，中国卸妆水市场规模将达到248.8亿元，年复合增长率显著。这一增长主要得益于消费者对卸妆水产品的认知和接受度不断提高，以及彩妆市场的快速发展。卸妆水市场需求正以惊人的速度增长，成为美妆市场中的一颗璀璨明珠。尤其是年轻女性群体，以其强烈的护肤意识和购买力，成为推动市场增长的主要力量。从上半年完美日记卸妆水产品抖音平台观众年龄分布来看，25-35岁年龄段占比高达80%以上，彰显出卸妆水在年轻消费群体中的广泛影响力。此外，预计未来几年内，卸妆水市场规模将持续扩大，年复合增长
CCF大数据与计算智能大赛--复赛第二名-【多分类，embedding】.zip
最新发布
09-25
CCF大数据与计算智能大赛-面向电信行业存量用户的智能套餐个性化匹配模型联通赛-复赛第二名-【多分类，embedding】.zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值