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

最新推荐文章于 2024-09-16 23:39:36 发布

hxgbieshuomeibanfa

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量139

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/weixin_63997211/article/details/124049806

版权

css3 css 前端

前端基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

圆角边框

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>

效果图