border-radius不仅仅可以用来画圆哦

来源：互联网发布：压缩相片软件下载编辑：程序博客网时间：2024/06/06 01:14

border-radius

可以设置四个角的值
每个角的值可以设置为百分比或长度
每个角可以设置水平或垂直方向的值

<html><head>    <meta charset="utf-8">    <style>        .circle {            width: 100px;            height: 100px;            background-color: #fb3;            border-radius: 50%;        }        .ellipse {            width: 100px;            height: 50px;            background-color: #fb3;            /*百分比*/            border-radius: 50%;        }        .half-ellipse-top {            width: 100px;            height: 50px;            background-color: #fb3;            /*top-left,top-right,bottom-right,bottom-left*/            /* 水平方向/垂直方向*/            border-radius: 50% / 100% 100% 0 0;        }        .half-ellipse-left {            width: 100px;            height: 50px;            background-color: #fb3;            /*top-left,top-right,bottom-right,bottom-left*/            /* 水平方向/垂直方向*/            border-radius: 100% 0 0 100% / 50%;        }        .quarter-ellipse {            width: 100px;            height: 50px;            background-color: #fb3;            /*top-left,top-right,bottom-right,bottom-left*/            /* 水平方向/垂直方向*/            border-radius: 100% 0 0 0;        }        .diagonal {            width: 200px;            height: 100px;            border-radius: 40px 10px;            background-color: #fb3;        }        .box {            border: ridge gold;            border-radius: 13em/3em;            width: 200px;            height: 100px;            background-color: #fb3;        }    </style></head><body>    <div class="circle"></div>    <div class="ellipse"></div>    <div class="half-ellipse-top"></div>    <div class="half-ellipse-left"></div>    <div class="quarter-ellipse"></div>    <div class="diagonal"></div>    <div class="box"></div></body></html>

这里写图片描述

0 0