CSS学习13之圆角边框及阴影

小黑神zxs

已于 2022-02-16 18:12:51 修改

阅读量1.6k

点赞数 1

分类专栏： CSS3详解文章标签： css3 html 前端 css边框 css阴影

于 2022-02-16 04:00:00 首次发布

本文链接：https://blog.csdn.net/zxs1002/article/details/122951208

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

回顾

盒子模型

盒子模型它的学名为框模型！但是我觉得叫它盒子模型更加贴切，方便理解！
CSS 框模型
所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

在这里插入图片描述

边框和阴影

边框和阴影是css里面的属性，顾名思义，是给元素施加边框属性和阴影属性。

圆角边框示例

代码

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

        #d1{
            width: 200px;
            height: 100px;
            border: 5px red solid;
            /*圆角边框*/
            border-radius: 20px;
            /*border-radius: 200px;*/
        }
        #d2{
            width: 100px;
            height: 100px;
            border: 5px red solid;
            /*圆角边框*/
            border-radius: 100px;
            float: right;
            margin-top: -110px;
        }
        #d3{
            width: 100px;
            height: 100px;
            border: 5px red solid;
            border-radius: 50px 0 0 0;
        }
        #d4{
            width: 100px;
            height: 100px;
            border: 5px red solid;
            border-radius: 100px 0 0 0;
            float: right;
            margin-top: -110px;
        }
        #d5{
            width: 100px;
            height: 100px;
            border: 2px red solid;
            /*圆角边框*/
            border-radius: 50px 50px 0 0;
        }
        #d6{
            float: right;
            margin-top: -100px;
            width: 100px;
            height: 100px;
            border: 2px red solid;
            /*圆角边框*/
            border-radius: 100px 100px 100px 0;
        }
        #d7{
            background: red;
            width: 100px;
            height: 50px;
            border: 1px red solid;
            /*圆角边框*/
            border-radius: 50px 50px 0 0 ;
        }
        #d8{
            float: right;
            margin-top: -50px;
            background: red;
            width: 50px;
            height: 100px;
            border: 1px red solid;
            /*圆角边框*/
            border-radius: 50px 0 0 50px ;
        }


    </style>
</head>
<body>

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>

</body>
</html>

效果

圆角边框可以有很多种，它的属性是border-radius: _px _px _px _px ;
并且它圆角变化的顺序是左上，右上，右下，坐下
因此就有很多种变化了
在这里插入图片描述

阴影示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style>
        #d1{
            margin: 0 auto;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            box-shadow: -10px 10px 50px yellow;
        }
        img{
            border-radius: 25px;
        }

    </style>
</head>
<body>

<div>

    <div id="d1">
        <div>
            <img src="images/tx.jpg" alt="tx">
        </div>
    </div>


</div>

</body>
</html>

效果

看起来是不是像qq头像的效果了，其实头像也是边框，圆形只是圆角边框的一种！
在这里插入图片描述

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

小黑神zxs

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS学习13之圆角边框及阴影

回顾盒子模型盒子模型它的学名为框模型！但是我觉得叫它盒子模型更加贴切，方便理解！CSS 框模型所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。圆角边框示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&
复制链接

扫一扫