圆形边框和圆角边框

桃扇骨 2023-02-16 14:28 32阅读 0赞

#### ①画圆 ####

首先容器设置成正方形，然后border-radius等于一半的边框

#### ②圆角矩形边框 ####

将border-radius设置成height的一半，可以实现好看的圆角矩形边框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .rec { 
    			width: 200px;
    			height: 200px;
    			border-radius: 50%;
    			background-color: pink;
    			text-align: center;
    			line-height: 200px;
    		}
    		.rec1 { 
    
    			width: 200px;
    			height: 50px;
    			border-radius: 25px;
    			background-color: #eee;
    			text-align: center;
    			line-height: 50px;  
    			margin-top: 25px;
    		}
    
    	</style>
    </head>
    <body>
    
    	<div class="rec">
    		实现圆
    	</div>
    
    	<div class="rec1">
    		好看的圆角矩形
    	</div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200610110747986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，32人围观）

还没有评论，来说两句吧...

相关阅读

相关 UIView 圆形边框

UIView bfPanel = [[UIView alloc]initWithFrame:CGRectMake(x, y, width, height)];

古城微笑少年丶/ 2023年10月18日 14:10/ 0 赞/ 142 阅读

相关 css边框圆角(css边框圆角实例)

用CSS制作边框圆角线 css没有这个功能，只有用背景图来实现 ![css边框圆角(css边框圆角实例)\_css边框圆角(css边框圆角实例)][css_css_cs

不念不忘少年蓝@/ 2023年09月26日 13:14/ 0 赞/ 155 阅读

相关 css圆角边框(css圆角边框无效)

纯CSS制作圆角边框的代码是什么? \xsnazzy h1, \xsnazzy h2, \xsnazzy p \{margin:0 10px; letter-spacin

野性酷女/ 2023年09月26日 13:09/ 0 赞/ 21 阅读

相关圆形边框和圆角边框

①画圆首先容器设置成正方形，然后border-radius等于一半的边框 ②圆角矩形边框将border-radius设置成height的一半，可以实现好看的圆

桃扇骨/ 2023年02月16日 14:28/ 0 赞/ 33 阅读

相关 CSS 圆角边框

CSS 圆角边框 ![在这里插入图片描述][20210325184439421.gif] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

灰太狼/ 2022年11月13日 04:29/ 0 赞/ 289 阅读

相关圆角和边框们

Android开发笔记——圆角和边框们在做Android界面开发时，我们往往希望它尽可能优美，尽可能显得专业。于是你看了看其他应用，哇，好多边框和圆角啊。你是不是也想给

野性酷女/ 2022年08月06日 10:05/ 0 赞/ 239 阅读

相关 JavaFx圆角边框

我的JavaFx程序使用FXML+Css布局我本以为圆角边框和Css一样使用 -fx-border-radius: 10px; 就可以了，然而并不是，是下面这样

ゞ浴缸里的玫瑰/ 2022年05月18日 02:06/ 0 赞/ 796 阅读

相关 CSS制作圆角边框

转自： [http://blog.onlygrape.com/css-arc/362][http_blog.onlygrape.com_css-arc_362] 一直做圆角的

亦凉/ 2022年01月07日 12:13/ 0 赞/ 407 阅读

相关 UIButton设置圆角和边框及边框颜色

UIButton testButton = [UIButton buttonWithType:UIButtonTypeSystem]; [testBut

分手后的思念是犯贱/ 2021年09月11日 04:28/ 0 赞/ 694 阅读

相关 css 边框和圆角样式

边框设置 border:solid npx; 边框为npx的实线 border:solid npx 颜色; 边框的颜色

不念不忘少年蓝@/ 2021年07月24日 15:12/ 0 赞/ 553 阅读