形元素的应用是在网页设计中一个相对较新的发展。与互联网普及初期相比，如今的网页设计水平已经超出很多人的想象，比如圆形的应用，现在的CSS工具使圆圈的创建越来越容易，所以他们在网页设计中的使用变得更加普遍。

当然还有许多人认为圆在网页设计中使用比较困难，并且它的存在仍有争议。然而，如果我们保持一个良好的网格布局，留有大量的空白，基于圆形的设计会成为网页设计的亮点。

YES!为什么不大胆探索？你会发现，如果能成功运用圆形元素，会有令你意想不到的效果，要知道，圆形要素往往是很吸引眼球的，它会让你脱颖而出。所以，今天我们就与大家共同学习如何选择合适的元素，并把它应用在圆形图案中。

Logo

导航栏

在今天的成长和不断发展的移动市场，用圆圈作为导航正在成为一个日益流行和合乎逻辑的选择。随着的触摸屏设备的兴起，除了智能手机和平板电脑，这种图案的导航应用越来越广泛，并有很好的理由。采用圆形的按钮，可以直观地与用户连接，甚至模仿指尖的形状，激励用户按它。

图标

圆形标志肯定是在网页设计中最常用的和运行时间最长的圆形元素。因为它们通常是图像，所以甚至不需要CSS提供太多的功能就可以达到运用的要求，没错，圆形可以自己去完美胜任任务，也许有人会认为，圆形图标已经在网页设计中运用了一段时间了，也应有一些变化了，是不是应该开发更多样化的趋势？但我们也发现不知为何圆形越来越广泛运用，可能It just work吧，它就是有这样的能力。

图片预览

我们已经在很多网站中看到这种技术了，不得不说还是很赏心悦目的的。而且，把一个预览图巧妙的放在一个剪裁圈里通常会让人觉得很炫酷哦，这就达到了吸睛的效果，是的，圆形不仅会在视觉上引导用户，还能更好的引导互动与交流。至于可用性，只要给圆形图像足够的空间，它们一样可以匹配网站创意与和谐的外观。

Calls to action

网站导航和触摸屏设备的普及让CTAs呼吁栏也有了很好的圆形素材使用效果，不过，如果你在网站上以类似的方式同时呈现导航和CTAs，那就不太好了，你应该尽量让他们用不同方式脱颖而出。导航很必要，CTAs也非常重要，如何把两部分都做得漂亮？对新的网页设计师来说，创建一个可视化的层次是不错的意见。

本文来源：视觉中国

<div class="tui-demo-7"></div>

<style type="text/css">
 .tui-demo-7 {
 width: 100px;
 height: 100px;
 margin: 50px auto;
 border: 1px solid #393D49;
 border-radius: 50%;
 position: relative;
 animation: tui-demo-7 2.0s linear infinite;
 }
 .tui-demo-7:after {
 content: "";
 width: 30px;
 height: 30px;
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: 0;
 background: #5FB878;
 }
 @keyframes tui-demo-7 {
 0% {
 transform: rotate(0);
 }
 100% {
 transform: rotate(360deg);
 }
 }
</style>

SS圆形展开菜单。

·1.设置开关状态为checked时子菜单的展开收缩动画。

·2.设置开关状态为checked时子菜单的展开收缩动画。

·3.设置开关状态为checked时子菜单的展开收缩动画。

·4.重置开关细节样式。

·5.添加子菜单的详细样式。

·6.设置开关状态为checked时子菜单的展开收缩动画。

·7.设置开关状态为checked时子菜单的展开收缩动画。