border属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标等),利用css3新增的属性值(如使用图片填充边框)可以实现一些更复杂的效果。

本文不介绍border的属性的基本应用方法,将直接介绍如何通过border属性实现一些常见的效

利用border画三角形和梯形等多边形

在CSS中,常见的平面图形为矩形以及圆形。但是难免有些情景需要我们利用CSS去绘制三角形、梯形和平行四边形等。此时我们可以利用border在渲染时的一些表现特点来实现这些功能。以下讲解如何一步一步得到三角形。
首先我们写一个div,样式如下

 .border {
width: 200px;
height: 100px;
margin: 0 auto;
border-top: 40px solid red;
border-bottom: 40px solid green;
border-left: 40px solid yellow;
border-right: 40px solid blue;
}

浏览器渲染后效果如下:

我们发现,通过给div的四个边框设置不同的颜色,其渲染后的表现形式为四个梯形组成的边框。
如果我们把高度定义为0,那么渲染后如下:

如果我们再把宽度设置为0,结果如下:

到此为止,通过对比以上定义的不同的样式,我们发现,在CSS中,边框的表现实际上以梯形的形式来渲染的(这可能与groove等3D效果的属性值有关,具体没去深入研究)。当元素的宽高为0时就会变成挤在一起的四个三角形。因此,我们可以想到,如果把其中的三个边框的颜色定义为透明色transparent,然后通过包裹在一个外层容器上,并给外层容器设置overflow:hidden,那么我们将得到一个等腰梯形或者三角形。现在我们把css修改如下:
<div class="box">
<div class="border"> </div>
</div>
        .box{
width: 200px;
height: 200px;
margin: auto;
overflow: hidden;
}
.border{
margin: 0 auto;
border-top: none;
border-bottom: 40px solid green;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
我们将得到以下梯形:

将样式设置为如下:

<div class="border">

</div>
        .border{
width:;height:;
margin: 0 auto;
border-top: 0 solid transparent;
border-bottom: 100px solid green;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}

我们将得到以下三角形:

由于所有的二维多边形可以划分为多个三角形组成,加上border这种表现形式的基础,我们可以通过设置不同边框宽度值、颜色以及借住伪元素或者多个元素的拼接可以实现更为复杂的一些图形,理论上我们可以用CSS绘制任何的多边形。比如多角星,菱形,以及我们常见的聊天气泡等。

利用border实现左右两栏等高布局

实现这种布局有很多解决方案,比如利用padding和margin相互抵消的方法即可实现。但是如果利用border来实现的话,可能可以使CSS更加简洁,适用性和兼容性也会更高。比如针对第一张图的效果,我们有如下html结构。

<div class="menu">
<ul>
<li>首页</li>
<li>商品管理</li>
<li>营销中心</li>
<li>会员管理</li>
<li>系统设置</li>
</ul>
</div>
<div class="content">这里是内容区域</div>
.menu {
float: left;
width: 200px;
color: #FFF;
}
.content {
border-left: 200px solid #40403b;/*这里是主要的样式*/
padding: 20px;
height: 1000px; /* 这里代表内容区域 */
}

由于border宽度不支持百分比值,所以这种实现方法的缺点是难以直接做到左右两侧宽度按比例自适应。

2017年总结的前端文章——border属性的多方位应用和实现自适应三角形的更多相关文章

  1. 2017年总结的前端文章——CSS盒模型详解

    CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题了.很多博客里讲得也很模糊不清,于是,我在这里重新整理一下. 可以认为每个html标签都是一个方块,然后这个方块又 ...

  2. 2017年总结的前端文章——一劳永逸的搞定 flex 布局

    flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: ce ...

  3. 2017年总结的前端文章——CSS高级技巧汇总

    1. 页面顶部阴影 body:before{ content: ""; position: fixed; top:-10px; left:; width: 100%; height ...

  4. 前端基础-CSS属性操作

    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...

  5. CSS:不可思议的border属性

    原文:Magic of CSS border property 译文:不可思议的CSS border属性 译者:dwqs 在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的 ...

  6. Border属性的各种变化

    本文前部分转自http://www.cnblogs.com/binyong/archive/2009/02/21/1395386.html,但是文章并未解释实现的原理,因此,后面本文也对次进行了解释. ...

  7. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  8. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  9. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

随机推荐

  1. bzoj 1084;vijos 1191 [SCOI2005] 最大子矩阵

    Description 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. Input 第一行为n,m,k(1≤n≤100,1≤m≤2 ...

  2. bzoj:1687;poj 2434:[Usaco2005 Open]Navigating the City 城市交通

    Description A dip in the milk market has forced the cows to move to the city. The only employment av ...

  3. HDU_1257

    最少拦截系统 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  4. 【笔记】nodejs读取JSON,数组转树

    const fs = require('fs'); // --------------- 读取源文件 --------------- const originData = require('./vux ...

  5. c语言基础学习06

    =============================================================================涉及到的知识点有:1.C语言库函数.字符输入函 ...

  6. sublime汉化教程

    转自: http://www.cnblogs.com/marsggbo/p/6622960.html 如何给sublime text3安装汉化包?so easy 哦 这是我本人亲身测试过的,肯定有效, ...

  7. [国嵌攻略][090][linux网络编程模型]

    编程模型 Socket的实质就是一个接口,利用该接口,用户在使用不同的网络协议时,操作函数得以统一.而针对不同协议的差异性操作,则交给了Socket去自行解决. TCP编程模型 UDP编程模型

  8. IDEA for Mac注册码使用

    尼玛,一不注意把磁盘抹掉了,重新下idea发现 之前的破解方法失效了 之前所有的 idea 授权服务器已遭JetBrains封杀,所以重新下载后 用之前的方法已经然并卵了,苦苦google后,发现新大 ...

  9. Linux 安装及配置 Nginx + ftp 服务器

    Nginx 安装及配置 一.Nginx 简介: Nginx("engine x") 是一款是由俄罗斯的程序设计师 Igor Sysoev 所开发高性能的 Web和 反向代理服务器, ...

  10. 访问远程MySQL数据库的方法

    请问各位部署LAMP的时候MySQL是独立出来的服务器,在apache上编译安装php的时候有个--with-mysql后面应该是带mysql路径的,可我应该怎样把这个连接到mysql服务器,因为不是 ...