css outline border 区别

最新推荐文章于 2023-05-16 09:51:40 发布

断弯刀

最新推荐文章于 2023-05-16 09:51:40 发布

阅读量278

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/qq_38327551/article/details/101115987

版权

先看代码

<html>

<head>
<style type="text/css">
.demo {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
.ao, .tu {
    display: inline-block;
    width: 0;
    font-size: 14px;
    line-height: 18px;
    margin: 35px;
    color: #2c3dc6;
}
.tu {
    direction: rtl;
}
.ao:before {
    content: "love你love";
}
.tu:before {
    content: "我love你";
}
.ao:before, .tu:before {
    outline: 2px solid #cd0000;
    /* border: 3px solid yellow; */
    font-family: Consolas, Monaco, monospace;
}
</style>
</head>

<body>

  <div class="demo">
    	        
    <span class="ao"></span>
    <span class="tu"></span>
</div>

</body>
</html>

使用outline
在这里插入图片描述
关键代码如下

在这里插入图片描述
使用 border

关键代码

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

断弯刀

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css outline border 区别

先看代码<html><head><style type="text/css">.demo { padding-top: 20px; padding-bottom: 20px; text-align: center;}.ao, .tu { display: inline-block; width: 0; ...
复制链接

扫一扫