zoukankan      html  css  js  c++  java
  • CSS样式-border-radius圆形边框基本用法

    主要通过属性border-radius,您能够创建圆角边框,正圆边框和椭圆边框,使用图片来绘制边框 。

    圆角边框(border-radius)的基本用法:

    圆角边框的最基本用法就是设置四个相同弧度的圆角,其样式如下:

    css部分:

    div{
         300px;
        height: 300px;
    border: 1px solid red;
    border-radius: 20px;
    }

    html部分:

    <div>
        四个圆角相等的圆角矩形
    </div>
    其效果如下:

     如果将值设为50%,则实现正圆形,其效果如下:

    css部分:

    div{
         300px;
        height: 300px;
    border: 1px solid red;
    border-radius:50%;
    }

    html部分:

    <div>
       正圆形
    </div>

    (注:正圆只能实现在四边相等的条件下 如不等则实现为椭圆形) 

    如果输入两个值实现值的位置顺序为:值1(左上  右下)值2(左下 右上)

    css部分:

    div{
         300px;
        height: 300px;
    border: 1px solid red;
    border-radius: 20px 100px;
    }

    html部分:

    <div>
      输入两个值实现值的位置顺序
    </div>
    其效果如下:

    如果输入三个值实现值的位置顺序为:值1(左上 )值2(左下 右上)值3(右下)

    css部分:

    div{
         300px;
        height: 300px;
    border: 1px solid red;
    border-radius: 20px 100px 50px;
    }

    html部分:

    <div>
      输入四个值实现值的位置顺序
    </div>
    其效果如下:

    如果输入四个值实现值的位置顺序为:值1(左上 )值2( 右上)值3(右下)值4 (左下)

    css部分:

    div{
         300px;
        height: 300px;
    border: 1px solid red;
    border-radius: 20px 100px 50px 50px;
    }

    html部分:

    <div>
      输入四个值实现值的位置顺序
    </div>
    其效果如下:
  • 相关阅读:
    带有数字的表达式
    不使用data-ng-app指令的表达式
    简单的表达式
    第一个AngularJS控制器
    第一个AngularJS指令
    第一个AngularJS表达式实例
    HTML5<fieldset>标签
    AngularJS 包含
    [python][odlboy]设置字符串打印的颜色
    [python][oldboy]关键字参数和位置参数,默认参数,可变长参数(无名,有名)
  • 原文地址:https://www.cnblogs.com/an2333/p/11520832.html
Copyright © 2011-2022 走看看