【笔记】利用CSS3特性实现圆角DIV

最新推荐文章于 2024-07-10 06:03:43 发布

_zw

最新推荐文章于 2024-07-10 06:03:43 发布

阅读量371

点赞数

分类专栏： CSS 文章标签： css3 html

本文链接：https://blog.csdn.net/u013172063/article/details/48973253

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html文件：

<html>
	
	<head>
		<title>HTML5 AND CSS3</title>

		<link rel="stylesheet" type="text/css" href="style.css">

	</head>

	<body >

		<div id="div_001"></div>
		<div id="div_002"></div>
	</body>
</html>

css文件：style.css

body{
	background: #F4F4F4;
}

#div_001{
	width: 500px;
	height: 100px;
	margin: auto;
	background: #ff0000;
	border-radius: 40px;
}

#div_002{
	width: 500px;
	height: 100px;
	margin: auto;
	margin-top: 20px;
	background: #ff00ff;
	border-top-left-radius: 20px;/*左上角*/
	border-top-right-radius: 20px;/*右上角*/
	border-bottom-left-radius: 100px;/*左下角*/
	border-bottom-right-radius: 100px;/*右下角*/
}

效果图如下：

经测试：火狐浏览器测试可行，其他浏览器是否支持请参考官方文档。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_zw

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【笔记】利用CSS3特性实现圆角DIV

html文件： HTML5 AND CSS3 css文件：style.cssbody{ background: #F4F4F4;}#div_001{ width: 500px; height: 100px; margin: auto; background: #ff0000; border-radius: 40px;
复制链接

扫一扫