简单实用的css边框属性border

本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式。

预备知识

border相关属性

  • border-width 边框的宽度
  • border-style 边框的样式
  • border-color 边框的颜色
案例举例

为了更加通俗易懂,demo用的是最简单的dom元素和css属性

图片描述

<div class="border">
    <div class="border-left">商品介绍</div>
    <div class="border-icon"></div>
    <div class="border-right">商品评价</div>
</div>
.border{
    margin: 50px auto;
    width: 540px;
    font-size:18px;
    line-height: 40px;
    text-align: center;
}
.border-left{
    width: 260px;
    height: 40px;
    background: #f3941d;
    float: left;
    color: #fff;
}
.border-icon{
    width: 0px;
    height: 0;
    border-width: 40 20 0 0;
    border-style: solid;
    border-color: #f3941d #f5d7b7 #f3941d #f3941d;
    float: left;
}
.border-right{
    width: 260px;
    height: 40px;
    float: right;
    background: #f5d7b7;
    color: #aaa;
}

上面的css代码重点在于左边较深颜色与右边较浅颜色中间有一个三角形.border-icon

图片描述

<div class="content">
    <div class="border">
        <div class="small-triangle"></div>
        <div class="text">介绍</div>
        <div class="big-triangle"></div>
    </div>
</div>
.content{
    margin: 60px auto;
    width: 540px;
    height: auto;
    position: relative;
    border-top: 1px solid #ddd;
}
.border{
    position: absolute;
    margin-top: -15px;
    margin-left: 20px;
}
.text{
    background: #e14340;
    height: 70px;
    width: 60px;
    line-height: 80px;
    color: #fff;
    text-align: center;
}
.small-triangle{
    position: absolute;
    width: 0;
    height: 0;
    border-width: 15px 10px 0px 0px;
    border-style: solid;
    border-color: #fff #c33a37 #ccc #ddd;
    margin-left: -10px;
}
.big-triangle{
    width: 0;
    height: 0;
    border-width: 8px 30px;
    border-style: solid;
    border-color: #e14340 #e14340 #fff #e14340;
}

上面的css代码重点在于左边较深颜色的小三角.small-triangle和底部的三角.big-triangle

原理解析

那么border属性是如何变化出不同的几何形状呢?

.border1{
    width:0; 
    height:0; 
    border-width:20px 20px 20px 20px; 
    border-style:solid; 
    border-color:#aaa #bbb #ccc #ddd;
}

看看上述样式产生的是一个什么样子的内容
图片描述

我们通过border-width border-color可以任意变化每一条变的宽高,和颜色。
任意组合就能组成不同的由三角形组成的其它几何形状了。

更多内容可关注微信公众号:有一个姑娘在coding
好好学习,快乐编码

653 声望
161 粉丝
0 条评论
推荐阅读
用canvas画心电图
效果图: 思路: {代码...} 具体代码 {代码...} 备注 代码没有注释,如果有看不懂的地方,可以联系我sf上联系不到的话可以联系我的公众号:有一个姑娘在coding 欢迎一起交流学习

leap_frog20阅读 5.4k评论 4

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.4k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan31阅读 2.3k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.6k评论 2

封面图
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...

chokcoco26阅读 2.1k

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.7k评论 1

封面图
万能的CSS 渐变!单标签绘制一个足球场
一眼望去,这里的形状只有圆形和矩形,在不借助其他标签的情况下(包括伪元素),其实很容易联想到渐变,一起看看如何绘制的吧,有非常多的渐变小技巧~

XboxYan18阅读 1.9k评论 8

封面图
653 声望
161 粉丝
宣传栏