CSS基本图形总结

来源：互联网发布：打印机的选择知乎编辑：程序博客网时间：2024/05/29 11:40
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    /*        css 三角形        1.width: 0;height: 0;        2.border: 100px solid transparent;        3.分别设置上、右、下、左四个border    */    span{display: block; width: 0;height: 0;border: 100px solid transparent;}       span    {        border-top-width: 100px;        border-top-style: solid;        border-top-color:pink;    }    /*        css 圆形        通过属性border-radius可以制作圆形，半圆和椭圆和一些特殊的图形    */    /*圆：宽高相等，border-radius值为宽高的一半*/    div{width: 200px;height: 200px;border: 1px solid blue;border-radius: 100px;}    /*上半圆：宽为高的两倍，左上角和右上角的圆角半径值和高度相等，左下角和右下角的圆角半径值为0*/    div{width: 200px;height: 100px;border: 1px solid blue;border-radius: 100px 100px 0 0;}    /*下半圆：宽为高的两倍，左下角和右下角的圆角半径值和高度相等，左上角和右上角的圆角半径值为0*/    div{width: 200px;height: 100px;border: 1px solid blue;border-radius: 0 0 100px 100px ;}    /*左半圆：高为宽的两倍，左下角和左下角的圆角半径值和宽度相等，右上角和右下角的圆角半径值为0*/    div{width: 100px;height: 200px;border: 1px solid blue;border-radius: 100px 0 0 100px ;}    /* 右半圆：高为宽的两倍，右上角和右下角的圆角半径值和宽度相等，左下角和左下角的圆角半径值为0*/    div{width: 100px;height: 200px;border: 1px solid blue;border-radius: 0  100px 100px 0 ;}    /*椭圆：宽高不相等，四个角的圆角水平半径定义为宽度的一半，垂直半径定义为高度的一半*/    div{width: 200px;height: 100px;border: 1px solid blue;border-radius:100px/50px;}    /*橄榄球：宽高相等，左上角和右下角的圆角半径值和宽高相等，右上角和左下角的圆角半径值为0*/    div{width: 100px;height: 100px;border: 1px solid blue;border-radius: 100px 0;}    /*四叶草*/    div{width: 100px;height: 100px;border: 1px solid blue;border-radius: 0 100px;}    /*div div{width: 100px;height: 100px;border: 1px solid blue;border-radius: 100px 0;}*/    /*树叶*/    div{width: 200px;height: 100px;border: 1px solid blue;border-radius: 100px 0;}    </style></head><body>    <span></span>    <div>        <div></div>    </div></body></html>
阅读全文
0 0