圆角边框及盒子阴影

圆角边框练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形边框</title>

    <style>
        /*1.圆形边框 : 圆角宽度 = div半径 + 边框宽度*/
        #round{
            width : 50px;
            height : 50px;
            border : 2px solid red;
            border-radius : 27px;
        }

        /*2.向上向下半圆 : 上（下）圆角宽度为width（向左向右则为height），下（上）圆角为0，高度要为宽度的一半 */
        #U{
            width : 50px;
            height : 25px;
            background : red;
            border-radius : 50px 50px 0 0;
        }
        #D{
            width : 50px;
            height : 25px;
            background : red;
            border-radius : 0 0 50px 50px;
        }
        /*4.四分之一圆 : 任意一个圆角宽度为width height，其余圆角宽度为0 */
        #Q1{
            width : 25px;
            height : 25px;
            background : red;
            border-radius : 25px 0 0 0;
        }
        #Q2{
            width : 25px;
            height : 25px;
            background : red;
            border-radius : 0 25px 0 0;
        }
        #Q3{
            width : 25px;
            height : 25px;
            background : red;
            border-radius : 0 0 25px 0;
        }
        #Q4{
            width : 25px;
            height : 25px;
            background : red;
            border-radius : 0 0 0 25px;
        }
    </style>

</head>
<body>
<p>1.圆形边框</p>
<div id="round"></div>
<p>2.向上半圆</p>
<div id="U"></div>
<p>3.向下半圆</p>
<div id="D"></div>
<p>向左向右不再演示</p>
<p>4.四分之一圆</p>
<div id="Q1"></div>
<br>
<div id="Q2"></div>
<br>
<div id="Q3"></div>
<br>
<div id="Q4"></div>

</body>
</html>

盒子阴影练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影练习</title>
    <style>
        div{
            width:100px;
            height:100px;
            background:yellow;
            box-shadow:10px 10px 2px red;
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>