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 3211: 花神游历各国【线段树区间开方问题】

    3211: 花神游历各国 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 3514  Solved: 1306[Submit][Status][Discu ...

  2. 2017ecjtu-summer training #4 CodeForces 731C

    C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  3. 高可用高性能分布式文件系统FastDFS实践Java程序

    在前篇 高可用高性能分布式文件系统FastDFS进阶keepalived+nginx对多tracker进行高可用热备 中已介绍搭建高可用的分布式文件系统架构. 那怎么在程序中调用,其实网上有很多栗子, ...

  4. github网站介绍、并使用git命令管理github(详细描述)

    本章学习: 1)熟悉github网站 2)通过git命令远程管理github, 3)git命令使用ssh key密钥无需输入账号密码 1.首先我们来熟悉github网站 1.1 注册github 登录 ...

  5. nginx服务器配置/websocket nginx 配置笔记

    server { listen 80; server_name xxx.com; # add_header '*' ; location /u/ { # 反向代理透传客户端ip proxy_set_h ...

  6. Vuethink正确安装过程

    1.      下载项目vuethink,本例将项目放置website文件下. 2.      后台搭建 本地建站–>以phpstudy为例 1)      新建站点域名 <Virtual ...

  7. NodeJS、NPM安装配置与测试步骤(windows版本)

    1.windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的"INS ...

  8. CCF系列之I’m stuck!(201312-5)

    试题名称: I’m stuck! 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定一个R行C列的地图,地图的每一个方格可能是'#', '+', '-', '|', '.', ...

  9. java学习总结之文件操作--ByteArrayOutputStream的用法

    ByteArrayOutputStream类是在创建它的实例时,程序内部创建一个byte型别数组的缓冲区, 然后利用ByteArrayOutputStream和ByteArrayInputStream ...

  10. Jasper之table报表

    这段时间用Jasper画报表,讲真的Jasper IDE真的很难用,网上找很久都没找到用table画的配置方法,以下是直接操作源码画table的方法,不用IDE一样可以做出来(不过样式还是得借助IDE ...