• border-radius图解


    自己看了理解的border-radius:
    设置参数:
    100*100的正方形,第一个:border-top-left-radius:100px 100px,即圆的半径为100px。圆弧与上和左border相切。
    第二个:border-top-left-radius:60px 60px,即圆的半径为60px。圆弧与上和左border相切
    第三个:border-top-left-radius:40px 60px ,即一个椭圆。圆弧与上和左border相切。

    总结上面:首先,设置详细的x轴和y轴半径,然后是哪个顶点,这个圆或者椭圆就和对应的边相切,比如设置的是top-left的,就与上和左边相切确定圆弧。设置bottom-right的,就与下和右边相切确定圆弧。

    兼容性:IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。
    -moz-border-radius:。。px; /* 老的 Firefox */

    js语法:object.style.borderRadius="。。。px";

    简写形式border-radius顺序:左顶点开始顺时针书写。

    注意:按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同,即是一个对角关系,×。如果省略 top-right,则与 top-left 相同。

    另外值还有%的书写形式。
    今早突然想起来,还有大于100px的时候没有测试

    测试结果:在半径大于边长时的效果和等于边长时的效果一样,也就是半径的最大值为边长,当半径超过边长时,值再大也是一个效果。

    另外:border-radius属性对背景色或者背景图也有影响,情况如下,这些背景顺便设置了一下background-clip的值(设置背景颜色或者背景在盒模型中的覆盖范围,三值:border-box,padding-box,content-box)进行测试:

  • 相关阅读:

    链表
    队列
    稀疏数组
    SQL——流程控制
    SQL——存储过程与函数
    SOA
    MVC模式
    《一线架构师实践指南》--阅读笔记三
    《一线架构师实践指南》-阅读笔记二
  • 原文地址:https://www.cnblogs.com/yaoyao-sun/p/5511328.html
Copyright © 2020-2023  润新知