css设置圆角

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角</title>
    <style>
        #example1{
                    border:2px solid #a1a1a1;
                    padding:10px 40px; 
                    background:#dddddd;
                    width:300px;
                    border-radius: 25px;
                }
        #example2 {
            border: 2px solid red;
            padding: 10px;
            border-radius: 50px 20px;
        }
    </style>
</head>
<body>
    <div id="example1">
        <p>border-radius 属性允许您为元素添加圆角边框！</p>
    </div>
    <br><br>
    <div id="example2">
        <p>如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角。</p>
    </div>
</body>
</html>

posted @ 2022-05-01 21:08 wjxuriel 阅读(82) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 画一个正方形

· CSS3 盒阴影

· CSS（十八）：圆角边框

· CSS圆角样式border-radius

· border属性之border-radius

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

公告

Live2D

Talk is cheap,
show me your code!

昵称： wjxuriel
园龄： 2年10个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

my-blog-site

Email： wjxuriel@petalmail.com

css设置圆角

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>圆角</title>
	<style>
	#example1{
	border:2px solid #a1a1a1;
	padding:10px 40px;
	background:#dddddd;
	width:300px;
	border-radius: 25px;
	}
	#example2 {
	border: 2px solid red;
	padding: 10px;
	border-radius: 50px 20px;
	}
	</style>
	</head>
	<body>
	<div id="example1">
	<p>border-radius 属性允许您为元素添加圆角边框！</p>
	</div>
	<br><br>
	<div id="example2">
	<p>如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角。</p>
	</div>
	</body>
	</html>