第8天：border 能干啥

最新推荐文章于 2020-08-17 19:38:53 发布

lefex

最新推荐文章于 2020-08-17 19:38:53 发布

阅读量178

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/103351448

版权

假期都玩好了吧，今天继续开始我们的《前端小课》，第一天来点轻松的。假期时我写了一篇关于伪类选择器的文章，如果你还没来得及阅读，建议阅读下群里讨论的一个选择器问题（一定要看）。今天的内容是 CSS 中的 border 属性，它的意思是「边框」。在超越技术官网上有这么一种设计，自我介绍、联系方式和公众号下面有一条横线，它会根据字数的不同，长度在变化。这里恰好用到了 border 这个属性：

border 是一个简写属性，它由一个或多个属性组成：border-width, border-style, border-color。往往会使用简写的方式，比如：

. title {   border: 1px solid red;}

border-width：表示边框的宽度，可以分别设置上下左右边框为不同的宽度，比如 border-bottom-width；

border-style: 表示边框的样式，可以分别设置上下左右边框为不同的样式，比如 border-bottom-style，可以取下面几种值：node、hidden、dotted、dashed、solid 等；

border-color：表示边框的颜色，可以分别设置上下左右边框为不同的颜色。

我们一起实现类似上面的效果：

上面效果的代码如下：

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Border</title>    <style>        .title {            text-align: center;        }
        .section-title {            font-size: 20px;            padding-bottom: 5px;            margin-left: 10px;            color: #258BD6;            font-weight: 600;            border-bottom-width: 1px;            border-bottom-style: solid;        }
        .des {            font-size: 17px;            padding: 10px;            letter-spacing: 1px;            line-height: 26px;        }
        .num {            color: red;        }
        .triangle {            width: 0;            /* width style */            border: 20px solid;            /* top [left, tight] bottom*/            border-color: #f30 transparent transparent;        }
.icon {    background-color: antiquewhite;    width: 15px;    height: 15px;    border: 11px solid transparent;}</style></head>
<body>    <h1 class="title">前端小课</h1>    <span class="section-title">简介</span>    <p class="des">《前端小课》是一本关于前端入门到进阶的多媒体电子书，    通过公众号的形式呈现内容，并与粉丝形成互动，推动读者自我驱动，利用        业余时间学习前端，迎合大前端的浪潮。    </p>    <span class="section-title">关于创办者</span>    <p class="des">创办者，素燕，来自一线大厂互联网从业者，做过移动端开发，    非常热爱大前端，热爱跨平台技术，希望能够把前端技术灵活运用到        移动端。    </p>    <span class="section-title">打卡学习</span>    <p class="des">目前共有<span class="num">220+</span>名同学加入打卡学习    队伍中，他们来自不同的领域，有iOS, Android 和前端的小伙伴。添加微信     wsy9871，备注小课，便会有人邀请加入微信群。    </p>    <div class="triangle"></div>    <div class="icon"></div></body>
</html>

关于 border 还有两个妙用：

1.做倒三角形图标：

.triangle {      width: 0;      /* width style */      border: 20px solid;      /* top [left, tight] bottom*/      border-color: #f30 transparent transparent;}

2. 扩大点击区域：

.icon {    background-color: antiquewhite;    width: 15px;    height: 15px;    border: 11px solid transparent;}

总结

今天的内容是关于 border 的使用，希望能够灵活运用。border 对于理解后续课程盒子模型有一定的帮助。

今天的打卡指令是下面任意一个：

1.你使用 border 都做过哪些有意思的事情；

2.节后第一天打卡，再接再厉；

推荐阅读：

第7天：CSS中的选择器详解

群里讨论的一个选择器问题（一定要看）

lefex

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第8天：border 能干啥

假期都玩好了吧，今天继续开始我们的《前端小课》，第一天来点轻松的。假期时我写了一篇关于伪类选择器的文章，如果你还没来得及阅读，建议阅读下群里讨论的一个选择器问题（一定要看）。今天的内容...
复制链接

扫一扫

第8天：border 能干啥

“相关推荐”对你有帮助么？