zoukankan      html  css  js  c++  java
  • css3画半圆

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆、下半圆、左半圆和右半圆效果。例如:
    .semicircle {
         
          margin: 30px;
        }
        .top {
          100px;/*宽度为高度的2倍*/
          height: 50px;
          border-radius: 50px 50px 0 0;/*圆角半径为高度的值*/
        }
        .right {
          height: 100px;/*高度为宽度的2倍*/
          50px;
          border-radius: 0 50px 50px 0;/*圆角半径为宽度的值*/
        }
        .bottom {
          100px;/*宽度为高度的2倍*/
          height: 50px;
          border-radius: 0 0 50px 50px;/*圆角半径为高度的值*/
        }
        .left {
          50px;
          height: 100px;/*高度为宽度的2倍*/
          border-radius: 50px 0 0 50px;/*圆角半径为宽度的值*/
        }

    效果如图3-35所示。

     

    border-radius制作半圆有两个小技巧:

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

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

  • 相关阅读:
    IT职场中外企面试最爱提的问题
    数据库的最简单实现
    两则故事
    如何提升程序员的“性能”
    那些年看过的电影
    VIM技巧
    独立之精神,自由之思想
    「我只是认真」——聊聊工匠情怀
    在这里,你终究会真正地失败
    公共场所英文译写规范
  • 原文地址:https://www.cnblogs.com/afuge/p/4631173.html
Copyright © 2011-2022 走看看