css圆角和阴影

最新推荐文章于 2024-04-21 10:40:16 发布

林代码er

最新推荐文章于 2024-04-21 10:40:16 发布

阅读量182

点赞数

分类专栏： linercss 文章标签： css html css3

本文链接：https://blog.csdn.net/m0_71088505/article/details/128322141

版权

linercss 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

圆角：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*radius就是圆形的半径  左上、右上、右下、左下*/
        div{
            width: 100px;
            height: 50px;
            background: red;
            border-radius: 50px 50px 0 0;
        }
        img{
            width: 100px;
            height: 100px;
            border-radius: 42px;
        }
    </style>
</head>
<body>
    <div></div>
    <img src="images/1.jpg" alt="图片">
</body>
</html>

阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*box-shadow:x轴  y轴  模糊程度 颜色*/
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px  100px cyan;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>