CSS 边框实现圆角矩形

最新推荐文章于 2022-11-30 22:03:32 发布

Silence-轩辕-寂

最新推荐文章于 2022-11-30 22:03:32 发布

阅读量1.1k

点赞数

分类专栏： 06. HTML 文章标签： linux css

本文链接：https://blog.csdn.net/jqh2002_blog/article/details/24998359

版权

06. HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<title>div+CSS圆角矩形</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/CSS">
.roundedRectangle{
	height: 70px; 
	width: 100px;
	margin-top: 100px;
	background: #9BD1FA;//背景色
	border-width: 10px;	//边缘的宽度，如果要分别设置可以这样：border-width: 15px 5px 15px 5px;依次为上、右、下、左
	border-style: solid;
	border-radius: 15px;	//圆角的大小
	border-color: #000 #000 #000 #000;	//边框颜色，依次为上、右、下、左
}

.roundedRectangle p{
	margin: 0px auto;
	padding: 20px;

	text-align:center;
	font-size: 20px;
	letter-spacing:8px;
}


</style>
</head>
<body>

<div class="roundedRectangle">
	<p>测试</p>
</div>
</body>
</html>

—————————————————————————————————

本文原创自Slience的csdn技术博客。

本博客所有原创文章请以链接形式注明出处。

欢迎关注本技术博客，本博客的文章会不定期更新。

大多数人想要改造这个世界，但却罕有人想改造自己。

世上没有绝望的处境，只有对处境绝望的人。

————By slience

—————————————————————————————————

Silence-轩辕-寂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 边框实现圆角矩形

div+CSS圆角矩形 .roundedRectangle{ height: 70px; width: 100px; margin-top: 100px; background: #9BD1FA;//背景色 border-width: 10px; //边缘的宽度，如果要分别设置可以这样：border-width: 15px 5px 15px 5px;依次为上、右、下、左 bo
复制链接

扫一扫