Question

我正在学习uikit并尝试在页面的不同部分添加弯曲的边框，但我无法弄明白。

我试图遵循的示例看起来像这样，我希望它看起来像这样：

header{background-color:#000000;width:100%;height:200px;font-size:100px;text-align:center;}
nav{background-color:#000000;width:20%;height:1300px;float:left;font-size:20px;text-align:center;color:#FFFFFF;}
section {background-color:#CCCC99; width:80%;height:1300px;float:left;font-size:20px;text-align:center;}

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
		<title>4WAP - Exercise1</title> 
		<link rel="stylesheet" href="css/uikit.css" /> 
		<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
		<script src="jquery/jquery-3.1.0.js"></script> 
		<script src="js/uikit.min.js"></script> 
	</head> 
	<body> 
	<header></header> 
		<nav>	
	<div class="uk-panel uk-panel-box">
	<h3 class="uk-panel-title">This is the Main Menu</h3>
	<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav> <!--main menu start--> 
	<li class="uk-parent"><a href="#">Main Option One - Click Me To See More or Less</a>
	<ul class="uk-nav-sub">
	<li><a href="#">More One</a></li>
	<li><a href="#">More Two</a></li>
	</ul>
	</li>
	<li><a href="#">Main Option Two</a></li>
	<li><a href="#">Main Option Three</a></li>
	</ul></div>
	</nav>
	<section></section>
	</body> 
</html>

你能帮我个忙吗？提前致谢

Answer 1

使用uikit，您可以将.uk-border-rounded类添加到元素中。或者手动将border-radius:5px;添加到元素css。

Answer 2

我给出了不同类型的曲面边界div：

.normal{
  position:absolute;
  left:5px;
  top:5px;
  width:100px; 
  height:200px;
  border:1px solid red;
  border-radius:10px;
}
.medium{
  position:absolute;
  left:15px;
  top:15px;
  width:100px; 
  height:200px;
  border:1px solid green;
  border-radius:30px;
}
.rounded{
  position:absolute;
  left:25px;
  top:25px;
  width:100px; 
  height:100px;
  border:1px solid blue;
  border-radius:50%;
}

<div class="normal"></div>
<div class="medium"></div>
<div class="rounded"></div>

如何在HTML的不同部分添加弯曲边框？

2 个答案: