分辨border和outline的例子

最新推荐文章于 2023-12-13 13:30:07 发布

lettuce_

最新推荐文章于 2023-12-13 13:30:07 发布

阅读量545

点赞数

分类专栏： html 文章标签： html border outline

本文链接：https://blog.csdn.net/lettuce_/article/details/79855905

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.border
设置元素主要的边框属性，包括border-width、border-style、border-color，可缺省，无固定顺序。

2.outline（轮廓）
在元素边框边缘的外围绘制一条包围元素的线，包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。
除了IE以外的浏览器都直接支持outline。只有规定了!DOCUMENT之后的IE8以上版本的浏览器才支持outline。

总结：这两者的区别有:
1.outline是不占空间的，既不会增加额外的width或者height
2.outline有可能是非矩形的

实例:

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
.ptest {
	outline-color: #EB3235;
	outline-width: 10px;
	outline-style: dashed;
}
.divtest {
	border-color:#18EDEA;
	border-style: groove;
	border-width: 10px;
	padding:20px 30px;
	margin-left:60px;
}
</style>
    </head>

    <body>
    <div class="divtest ptest">
      <p class="ptest">wowow</p>
    </div>
</body>
</html>

结果显示:

详情查看W3cschool

lettuce_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分辨border和outline的例子

1.border设置元素主要的边框属性，包括border-width、border-style、border-color，可缺省，无固定顺序。2.outline（轮廓）在元素边框边缘的外围绘制一条包围元素的线，包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。除了IE以外的浏览器都直接支持...
复制链接

扫一扫

专栏目录