• CSS3边框border-radius


    一、官方解释

    设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数。

    水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

    如果只提供一个,将用于全部的于四个角。

    如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。

    如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。

    垂直半径也遵循以上4点。

    对应的脚本特性为borderRadius。

    二、例子

    2.1 四个参数值

    <div style=" 100px;height: 100px;border:50px solid red;border-radius: 50px;"></div>
    
     
    <div style=" 100px;height: 100px;border:50px solid red;border-radius: 100px;"></div>
    
     
    <div style=" 100px;height: 100px;border:50px solid red;border-radius: 50px 100px;"></div>
    
     
    <div style=" 100px;height: 100px;border:50px solid red;border-radius: 10px 30px 50px 100px;"></div>
    
     

    所以border-radius里面的参数应该代表的是四个角上圆的半径。

    2.2 百分比

    <div style=" 100px;height: 100px;border:50px solid red;border-radius: 25%;"></div>
    
     
    <div style=" 100px;height: 100px;border:50px solid red;border-radius: 50%;"></div>
    
     

    2.3 水平半径/垂直半径

    <div style=" 100px;height: 200px;border:50px solid red;border-radius: 100px/150px;"></div>
    
     
    <div style=" 100px;height: 200px;border:50px solid red;border-radius: 200px/300px;"></div>
    
     
    <div style=" 100px;height: 200px;border:50px solid red;border-radius: 200px/200px;"></div>
    
     

    这里的半径全等于本身宽度(width/2)+半径宽度(border-width/2)即为一个椭圆。另外半径最多渲染宽度(width/2)+半径宽度(border-width/2)的值,超过的按比例值来算。

    CSS3边框border-radius

  • 相关阅读:
    DotLucene 之 Bugs 小记[转]
    商业搜索引擎都需要哪些技术
    开源搜索引擎资源
    关于笔记本的CPU和显卡性能比较[转]
    上传图片方法大全 [网摘]
    Lucene 中文分词的 highlight 显示
    JS调用服务器端方法
    在线免费图书馆
    用dotLucene为数据库内容建立索引
    mybatis 数据库.xml中方法参考
  • 原文地址:https://www.cnblogs.com/mazey/p/7153945.html
Copyright © 2020-2023  润新知