boreder-radio属性是css3的新增属性，可以设置圆角的边框。
　　
　　<head> 
　　　　<style type="text/css">

　　　　　　*{
　　　　　　　　margin: 0;
　　　　　　　　padding: 0;
　　　　　　}
　　　　　　.roundedCorner{
　　　　　　　　width:100px;/*宽*/
　　　　　　　　height: 100px;/*高*/
　　　　　　　　border-radius: 10px;/*圆角角度左上，右上，右下，左下都是10px*/
　　　　　　　　background: deepskyblue;/*背景颜色*/
　　　　　　　　margin: 20px auto;/*上下间距20px，左右居中*/
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="roundedCorner"></div>
　　</body>

　　效果图：

　　border-radius的优势不仅仅在制作圆角的边框，还是利用border-radius属性来画圆和半圆。

　　制作圆的方法：

　　<head>

　　　　<style type="text/css">
　　　　　　*{
　　　　　　　　margin: 0;
　　　　　　　　padding: 0;
　　　　　　}
　　　　　　.roundedCorner{
　　　　　　　　width: 100px;/*宽*/
　　　　　　　　height: 100px;/*高*/
　　　　　　　　border-radius: 50%;/*圆角角度设置50%，不要设置具体数值，如果哦下面的border值大的话会变形*/
　　　　　　　　background: deepskyblue;/*背景颜色*/
　　　　　　　　margin: 20px auto;/*上下间距20px，左右居中*/
　　　　　　　　border: 5px solid black;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="roundedCorner"></div>
　　</body>

效果图

制作半圆的方法;

　　<head>

　　　　<style type="text/css">
　　　　　　*{
　　　　　　　　margin: 0;
　　　　　　　　padding: 0;
　　　　　　}
　　　　　　.roundedCorner{
　　　　　　　　width: 100px;/*宽*/
　　　　　　　　height: 50px;/*高*/
　　　　　　　　border-radius: 50px 50px 0 0;/*圆角角度*/
　　　　　　　　background: deepskyblue;/*背景颜色*/
　　　　　　　　margin: 20px auto;/*上下间距20px，左右居中*/

　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="roundedCorner"></div>
　　</body>

效果图

border-radio属性的更多相关文章

  1. HTML+CSS基础 border css属性 Div块 盒子

    border  css属性 边框颜色 border-color:red/#ffffff/rgb()默认为黑色 边框样式 border-style:solid (实线) dashed (虚线).默认为n ...

  2. 利用边框border的属性做小符号

    前两天学习中,发现网站上的一个小符号,以为是插入的img,但找来找去也未发现img的地址.最后问了同学,才得知是用border属性做出来的. 符号如右:  其css代码如下: .fuhao { pos ...

  3. border-width和border其它属性配合实现的小三角形标签效果

    如图,附上css代码 { width: 0; border-width: 30px 0px 72px 164px; border-style:solid; border-color:red; bord ...

  4. border边框属性

    边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...

  5. radio属性添加

    经常会遇到js控制radio选中和切换的问题 之前一直使用的是checked属性来完成的 但是现在发现这个属性有个大问题 今天就是用js给选中radio的赋值,使用的$().attr("ch ...

  6. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  7. 获取input type=radio属性的value值

    个人代码1: <div class="form-group" style="width: 250px;margin:0 auto;"> <la ...

  8. 关于input单选框的radio属性

    最近在做前端页面的时候遇到一个问题(后端php猴子前端不怎么写) 我写了一段代码: <form action="">        <label for=&quo ...

  9. border——边框属性

    一.第一层次(复合样式) <style> p.one{border:1px solid black;} /*边框:1像素 实心的 黑色:*/ </style> <body ...

  10. 用CSS border相关属性画三角形

    效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0J ...

随机推荐

  1. JPA + SpringData 操作数据库原来可以这么简单 ---- 深入了解 JPA - 1

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7703679.html ------------------------------------ ...

  2. BandwagonHost搬瓦工VPS自建

    地址:https://bwh1.net/aff.php?aff=18648 ,购买$2.99的就够用了(现在没有$2.99的了,最低是$4.99) 步骤一: 步骤二: 步骤三:选图中的选项,然后点 A ...

  3. 对象转字典 iOS

    最近在开发SDK,我开放给客户model类设置信息后,对象转字典,POST给后台. 思路:通过Runtime访问属性列表,快速转换成字典. FRObjectToDictionary.h类 p.p1 { ...

  4. Windows下mysql5.5主从同步

    前置条件: A主机(作为主服务器) 环境:Win7,mysql5.5 IP:172.17.42.82 B主机(作为从服务器) 环境:Win7,mysql5.5 IP:172.17.42.156 主服务 ...

  5. DUBBO初探-搭建DUBBO开发环境

    我所理解的DUBBO 相对于传统web开发框架,dubbo更加适合于并行系统开发,分布式,模块化.将server和client都注册到zookeeper注册中心上,然后由最外层客户端发起请求到相应cl ...

  6. C++ UI资源

    最近又来搞界面了,现把这几天收集到的资料汇总下,方便今后慢慢学习! Duilib: Duilib是一个Windows下免费开源的DirectUI界面库,由于简约易扩展的设计以及稳定高效的实现被各大互联 ...

  7. hadoop2集群中关键配置文件的记录

    配置HDFS  高可用 1.配置HDFS配置文件 $ vi hdfs-site.xml #写入 <configuration> #配置NameService 名字随便起 <prope ...

  8. Longest Common Substring（最长公共子序列）

    Longest Common Substring Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ...

  9. BZOJ-1968

    1968: [Ahoi2005]COMMON 约数研究 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 2308  Solved: 1768[Submit] ...

  10. 一款超好用轻量级JS框架——Zepto.js(上)

       前  言 絮叨絮叨 之前我们介绍过JQuery怎么自定义一个插件,但没有详细介绍过JQuery,那么今天呢....我们还是不说JQuery,哈哈哈哈 但是今天我们介绍一款和JQuery超级像的一 ...