0
点赞
收藏
分享

微信扫一扫

css_5day(圆角边框 背景阴影 文字阴影)

程序小小黑 2022-04-13 阅读 70

圆角边框

border-radius

 <style>
        .hu {
        width:100px;
        height:100px;
        background-color:pink;
        border-radius: 50px 50%; 
        /* radius越大,圆角弧度越大 */
        /* 当半径设置为正方形盒子宽度或高度的一半,就可以变为圆形 */
        /* 如果要设置圆角矩形,则半径设置为高度的一半 */
        }
    .huhu {
        width:100px;
        height:100px;
        background-color:pink;
        border-radius: 50px 10px 20px 40px;
        /* 顺时针设置圆的半径,可以设置不同角度的盒子 */
        /* 只有两个数据则是对角线相等 */
    }


    </style>
    

<body>
    <div class="hu"></div>
    <div class="huhu"></div>

</body>

效果图

 背景阴影

    <style>

    .huhuhu{
        width:300px;
        height:300px;
        background-color: pink;
        margin:100px auto;
        box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
        /* 水平阴影的位置 垂直阴影 模糊距离(虚实) 阴影尺寸  阴影颜色 */
        /* 阴影不占用空间 */
    }
    </style>
    
<body>
    <div class="huhuhu"></div>
</body>

效果图

 文字阴影

    <style>
    a {
        width:100px;
        height:100ox;
        background-color: pink;
        text-shadow: 5px 5px 6px rgba(0,0,0,.3);
    }
    </style>
    <a>qqqqqqqqqqqq</a>

 

效果图

 

举报

相关推荐

0 条评论