zoukankan      html  css  js  c++  java
  • 边框圆角

    边框圆角

    1.什么是边框圆角?
    将直角的边框变为圆角的边框
    2.边框圆角的格式?
    border-radius: 左上 右上 右下 左下;
    3.将正方形变为圆形的技巧
    border-radius: 50%;
    4.系统如何绘制圆角?
    首先根据指定的值找到圆心
    按照指定的值作为半径绘制圆弧
    绘制半圆
    1
    200px; 2 height: 100px; 3 border: 1px solid #000; 4 box-sizing: border-box; 5 margin: 100px auto; 6 border-radius: 100px 100px 0 0;
    绘制椭圆
    400px; height: 200px; border: 1px solid #
    000; box-sizing: border-box; margin: 300px auto; /*绘制椭圆设置水平方向为宽度的一半, 设置垂直方向为高度的一半*/ border-top-left-radius: 200px 100px; border-top-right-radius: 200px 100px; border-bottom-left-radius: 200px 100px; border-bottom-right-radius: 200px 100px;
    <div class="all">
        <!--上面的半圆-->
        <div class="top"></div>
        <!--下面的半圆-->
        <div class="bottom"></div>
        <!--左边的小圆-->
        <div class="left"></div>
        <!--右边的小圆-->
        <div class="right"></div>
    </div>
     
     
          .all{
             400px;
            height: 400px;
             border: 1px solid #000;
             box-sizing: border-box;
             margin: 200px auto;
             position: relative;
           }
            .top{
                 400px;
                height: 200px;
                background: red;
                border-top-left-radius: 200px 200px;
                border-top-right-radius: 200px 200px;
            }
            .bottom{
                 400px;
                height: 200px;
                background: skyblue;
                border-bottom-left-radius: 200px 200px;
                border-bottom-right-radius: 200px 200px;
            }
            .left{
                 200px;
                height: 200px;
                background: red;
                border: 80px solid skyblue;
                box-sizing: border-box;
                border-radius: 50%;
                position: absolute;
                left: 0;
                top: 100px;
            }
            .right{
                 200px;
                height: 200px;
                background: skyblue;
                border: 80px solid red;
                box-sizing: border-box;
                border-radius: 50%;
                position: absolute;
                right: 0;
                top: 100px;
            }
  • 相关阅读:
    MYSQL mysql.user表中权限对应的解释
    MYSQL LOCK IN SHARE MODE&FOR UPDATE
    什么是索引
    ol,li,ul,dl,dt,dd
    CSS类与选择器【转】http://www.cnblogs.com/duanhuajian/archive/2012/12/17/2821524.html
    bootstrap笔记
    iPhone应用程序开发基础之一: IBOutlet与IBAction
    Objective-C中的加号与减号
    Linux下*.tar.gz文件解压缩命令
    【PHP+MySQL学习笔记】php操作MySQL数据库中语句
  • 原文地址:https://www.cnblogs.com/zhangzhengyang/p/11099963.html
Copyright © 2011-2022 走看看