zoukankan      html  css  js  c++  java
  • 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)进行测试:

  • 相关阅读:
    Vue
    Vue
    Vue
    服务器上部署django项目流程?
    Git 命令
    git命令?
    消息队列中间件??
    简述COOKIE和SESSION的区别与联系?
    什么是restful API?
    Django、Flask、Tornado的区别?
  • 原文地址:https://www.cnblogs.com/yaoyao-sun/p/5511328.html
Copyright © 2011-2022 走看看