`
南山忍者
  • 浏览: 83500 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

前台的界面开发相关

    博客分类:
  • HTML
阅读更多

 

自己前端开发笔记!(2013-2-19)

 

1、如何使矩形四个拐角圆滑。

     

border-radius-left、top、bottom、right 

 

例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div style="border:3px #000 solid;
	border-top-right-radius:30px; 
	border-top-left-radius:10px; 
	border-bottom-left-radius:20px; 
	border-bottom-right-radius:10px; 
	width:50px; 
	height:50px; 
	background:#f60;">
</div>

<div style="border:3px #000 solid;
		border-radius:10px; 
		width:50px; 
		height:50px; 
		background:#fff;">
</div>
</body>
</html>

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics