CSS边框

最新推荐文章于 2024-04-25 18:36:27 发布

光年之外_yi

最新推荐文章于 2024-04-25 18:36:27 发布

阅读量364

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44547592/article/details/98637576

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。
1.四个边框
border-left ：设置左边框，一般单独设置左边框样式使用。
border-right ：设置右边框，一般单独设置右边框样式使用。
border-top ：设置上边框，一般单独设置上边框样式使用。
border-bottom ：设置下边框，一般单独设置下边框样式使用。
2.设置四边相同的边框
border:1px solid #ccc;
表示设置宽度为1个像素的灰色实线边框
3边框的三个样式
通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。
边框宽度：border-color:#ccc;
边框样式：border-width:1px;
边框颜色：border-style:solid;
以下是边框的样式值：
在这里插入图片描述
边框样式截图：

4.圆角效果
可以通过border-radius来设置边框的圆角效果，例如：border-radius：10px;
实现效果：

5.边界图片
通过border-image 属性可以使用图像来创建一个边框，以下是用于创建边框的原始图像：
在这里插入图片描述
示例代码(包含以上全部内容)：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>border</title>
    <link href="~/content/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
    <style>
        .contenxt div {
            background-color: #cbac83;
            float: left;
            margin-right: 20px;
            padding: 5px 10px;
            color: #ffffff;
        }
        .contenxtes div {
            border: 15px solid transparent;
            width: 250px;
            padding: 10px 20px;
            
        }
        #round {
            -webkit-border-image: url(../../content/images/101.PNG) 30 30 round;
            -o-border-image: url(../../content/images/101.PNG) 30 30 round;
            border-image: url(../../content/images/101.PNG) 30 30 round;
        }
        #stretch {
            -webkit-border-image: url(../../content/images/101.PNG) 30 30 stretch; 
            -o-border-image: url(../../content/images/101.PNG) 30 30 stretch;
            border-image: url(../../content/images/101.PNG) 30 30 stretch;
        }
        #border_radius{
            border:1px solid #cbac83;
            border-radius:10px;
        }
    </style>
</head>
<body>
    <div class="contenxt col-lg-12 col-md-12 col-sm-12" style="margin-top:15px;">
        <div style="border: none;">none</div>
        <div style="border: hidden;">hidden</div>
        <div style="border: 5px dotted #339e35;">dotted</div>
        <div style="border: 5px dashed #339e35;">dotted</div>
    </div>
    <div class="contenxt col-lg-12 col-md-12 col-sm-12" style="margin-top:15px;">
        <div style="border: 3px solid #339e35;">solid</div>
        <div style="border: 5px double #339e35;">double</div>
        <div style="border: 5px groove #339e35;">groove</div>
        <div style="border: 5px ridge #339e35;">ridge</div>
    </div>
    <div class="contenxt col-lg-12 col-md-12 col-sm-12" style="margin-top:15px;">
        <div style="border: 5px inset #339e35;">inset</div>
        <div style="border: 5px outset #339e35;">outset</div>
    </div>
    <div class="contenxt col-lg-12 col-md-12 col-sm-12" style="margin-top:15px;">
        <div id="border_radius">border-radius</div>
    </div>
    <div class="contenxtes col-lg-12 col-md-12 col-sm-12" style="margin-top:15px;">
        <div id="round" style="width:280px;">这里，图像平铺（重复）来填充该区域。</div>
        <br>
        <div id="stretch" style="width:280px;">这里，图像被拉伸以填充该区域。</div>
    </div>
</body>
</html>

实现效果：
在这里插入图片描述

光年之外_yi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS边框

CSS边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。1.四个边框border-left ：设置左边框，一般单独设置左边框样式使用。border-right ：设置右边框，一般单独设置右边框样式使用。border-top ：设置上边框，一般单独设置上边框样式使用。border-bottom ：设置下边框，一般单独设置下边框样式使用。2.设置四边相同...
复制链接

扫一扫