初步学习border-radius

  1.属性解析

  border-radius是css3属性,他可以使div的角进行一定程度的弯曲。

  比如说下面这个width和height的正方形div

  

  经过设置border-radius之后四个角会出现弯曲

border-radius:40px;

  当然我们可以针对某个角进行单独的设置

border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;

  2.使用场景

  而在网页开发中,我们会遇到很多种需要使用圆形图案的情况,比如说做个圆形的头像图案

  

  做个进度统计

  

  上面这些情况都需要用到border-radius这个属性去弯曲边框。

  3.初探border-radius

  那我们该如何生成一个原型呢,原理是把边角弯曲成一条圆弧,在这里我们只需把border-radius大小设置为div(正方形)高的一半就好了,所以我们一般设置

border-radius:50%;

  就可以实现圆型的图案。

  在刚刚div的基础上增加border-radius:50%;就可以实现如下图案

  

时间: 2024-10-06 20:20:10

初步学习border-radius的相关文章

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

状态保持以及AJAX的初步学习

嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项目期,今天下午学习了ajax,这个使用javascript写起来还是蛮麻烦的,嘿嘿,但是使用jquery实现是非常的简单的,不知道是不是由于我刚接触的原因,下面来总结一下今天学习的内容,感觉今天学习的还是很有必要详细总结的,因为在以后的项目中还是经常会使用的. 一.状态保持 1.cookie的添加与

Jquery Easy UI初步学习(三)数据增删改

第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo.cnblogs.com/ 我的理解,就是panel有的属性Window.dialog都有,同时保留自己的扩展属性方法 , 所以主要展示pannel的属性. Pannel 属性 名称 类型 说明 默认值 title string 显示在Panel头部的标题文字. null iconCls strin

Jquery Easy UI初步学习(一)

Easy UI 1.3.2 以前听说Easy UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧 先从后台管理的主页面开始,如要要做主页需要了解以下几项 data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如: <div class="easyui-dialog" style="width:400px;

LinQ的初步学习与总结

嘿嘿,说起来ORM和LinQ,就感觉离我好遥远的,在学校是没有学习的,所以总感觉学习了LinQ就是大神,现在嘛,终于也体会一点,感觉LinQ只是初步学习,没有太难,当然以后使用在项目中就没有这样的简单啦,下面就全面的总结一下LinQ的其中一部分,LinQ有三部分:LinQ TO Object:LinQ TO SQL ;LinQ TO XML.而在这里我先来总结一下LinQ TO Object的学习吧 一.初步认识LinQ to Object static void Main(string[] a

初步学习C++:C++的基本概念

开始学习C++,先从最基本的概念开始,让自己有一个系统的知识概念. 1.对象: 在面向对象程序设计中,对象是描述其属性的数据以及对这些数据施加的一组操作封装在一起构成的统一体.对象可以认为是:数据+操作(对象所能完成的操作表示它的动态行为,也成为方法). 2.类: 在面向对象程序设计中,类就是具有相同的数据和相同的操作的一组对象的集合,类是对具有相同数据结构和相同操作的一类对象的描述. 3.消息: 在面向对象程序设计中,一个对象向另一个对象发出的请求被称为"消息".当对象接收到发向它的

Java深度历险(三) Maven初步学习

这几天接触这个词,很多遍了,只是浅显的体会到它在GXPT中的好处,功能之强大,又通过网络查询了资料进一步的认识学习了,和大家分享. Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 在gxpt中的体现 1. 父子关系 一个多模块项目通过一个父POM 引用一个或多个子模块来定义. a. 在父目录中分别创建子项目 b. 父项目,通过以下配置,将子项目关联: 如下: <span style="font-size:18px;"

初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助

初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: 1 var fs = require('fs'); 2 var tel = [ 3 "1/2/4/6/a.tpl.html", 4 "1/2/4/7/9/c.tpl.html", 5 "1/3/5/8/b.tpl.html"]; 6 var demo = function (mulu)

实验1 ASP.NET MVC 4 初步学习

1.添加控制器 http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-controller 2.添加视图 http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-view 3.添加模型 http://www.asp.net/mvc/tutorials/mvc-4/getting-sta

第二十篇 jQuery 初步学习2

jQuery 初步学习2 前言: 老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言,我们要遵守它的规则,文本的后缀得是html,里面的编写格式当然也要遵守它的规则. 如果有同学没有好的编辑器,写代码很打脑壳,记不住单词等等,老师推荐一个编辑工具:WebStorm .老师用的就是这个来写的前端,版本用的是8.0.3,还是挺好用的. 上节课我们初步学习了jQuery,那么这节课,我们再深入了解