CSS：边框设置

最新推荐文章于 2024-06-24 11:02:57 发布

books1958

最新推荐文章于 2024-06-24 11:02:57 发布

阅读量1k

点赞数

分类专栏： html/css/javascript 文章标签： css 边框

本文链接：https://blog.csdn.net/books1958/article/details/53391292

版权

html/css/javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

CSS使用 border 设置元素的边框样式。
效果图：
这里写图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框设置</title>

    <style type="text/css">
        img{
            width: 300px;
            margin: 30px;
            padding: 2px;
        }

        img#img_1{
            border-left:  8px dotted red;  /*左侧边框，点划线，红色，8px宽度*/
            border-right: 4px dashed green;  /*右侧边框，虚线*/
            border-top: 6px solid orange; /*上侧边框，实线*/
            border-bottom: 8px solid #CC00FF; /*下侧边框，实线*/
        }

        img#img_2{
            border:  4px dashed red;  /*简写，四周边框使用相同样式*/
        }

    </style>
</head>

<body>

<img id="img_1" src="http://pic76.nipic.com/file/20150821/17520916_155336320001_2.jpg">
<img id="img_2" src="http://pic76.nipic.com/file/20150821/17520916_155336320001_2.jpg">

</body>
</html>