标签：模型 54px width radius 延伸 半圆 height border

圆角边框

border-radius: 20px 10px 50px 30px;

使用border-radius制作特殊图形：

圆形

利用border-radius属性制作圆形的两个要点：

① 元素的宽度和高度必须相同

② 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

    #div1{
        width: 200px;
        height: 200px;
        border: 10px solid blue;
        overflow:hidden ;
        margin: 0 auto;
        border-radius: 50%;
    }
​
#div1{
        width: 200px;
        height: 200px;
        border: 10px solid blue;
        overflow:hidden ;
        margin: 0 auto;
        border-radius: 150px;
    }

 

半圆形

利用border-radius属性制作半圆形的两个要点：

① 制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值

② 制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

上半圆：

div1{

width: 100px;

height: 50px;

border: 4px solid red;

border-radius: 54px 54px 0 0; }

下半圆：

div2{

width: 100px;

height: 50px;

border: 4px solid red;

border-radius: 0 0 54px 54px; }

左半圆：

div3{

width: 50px;

height: 100px;

border: 4px solid red;

border-radius: 54px 0 0 54px; }

右半圆：

div4{

width: 50px;

height: 100px;

border: 4px solid red;

border-radius: 0 54px 54px 0; }

 

扇形

利用border-radius属性制作扇形遵循“三同，一不同”原则：

① “三同”是元素宽度、高度、圆角半径相同

② “一不同”是圆角取值位置不同

左上扇形：

div5{

width: 50px;

height: 50px;

border: 4px solid red;

border-radius: 54px 0 0 0; }

 

 

标签：模型,54px,width,radius,延伸,半圆,height,border
来源： https://www.cnblogs.com/fqwwyx/p/15730740.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。