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. Spring批量更新batchUpdate提交和Hibernate批量更新executeUpdate

    1:先看hibernate的批量更新处理. 版本背景:hibernate 5.0.8 applicationContext.xml 配置清单: <?xml version="1.0&q ...

  2. Python练习----购物车

    要求: 1.启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 4.可随时 ...

  3. UVW源码漫谈(四)

    十一假期后就有点懒散,好长时间都没想起来写东西了.另外最近在打LOL的S赛.接触LOL时间不长,虽然平时玩的比较少,水平也相当菜,但是像这种大型的赛事有时间还是不会错过的.主要能够感受到选手们对竞技的 ...

  4. mybatis xml中使用where 条件中的in方法

    <select id="queryCount" resultType="cn.bnsr.edu_yun.view.FileView"> SELECT ...

  5. Yii2之mailer的使用

     Mailer组件是yii框架自带的用于收发邮件的组件,无需安装,只需做一些配置即可使用,非常便捷.本文就mailer组件从配置到使用进行简单讲解.  首先在config/main.php配置如下: ...

  6. LeetCode 599. Minimum Index Sum of Two Lists (从两个lists里找到相同的并且位置总和最靠前的)

    Suppose Andy and Doris want to choose a restaurant for dinner, and they both have a list of favorite ...

  7. Linux系列教程(八)——Linux常用命令之压缩和解压缩命令

    前面一篇博客我们讲解了Linux帮助和用户管理命令,对于帮助命令,man 命令能获得命令和配置文件的帮助信息,help命令能获得shell内置命令的帮助信息.我们可以通过which来区分什么是shel ...

  8. .3-Vue源码之数据劫持(1)

    写了一半关机了,又得重新写,好气. 上一节讲到initData函数,其中包含格式化.代理.监听. // Line-3011 function initData(vm) { var data = vm. ...

  9. 中高级JavaScript易错面试题

    写出下题的输出 1.函数的实参与形参length var length = 10; function fn() { console.log(this.length); } var obj = { le ...

  10. Lua如何管理”package”

    Lua如何管理"package" 方式一: 私有方法和变量都需要显式定义为local类型的,这很容易造成错误.一旦不小心漏写,就又将方法定义为全局的了. "package ...