前端开发工作中经常会碰到奇形怪状的图形,当然也少不了UI设计童鞋的脑洞和创意啦,初级的开发人员可能会选择使用图片做背景加上位置属性实现,不过很多时候,CSS能实现的就不要再动用PS等工具了,时间宝贵,经验更宝贵,毕竟简单的搬砖很容易就会,不动“声色“的实现才是来之不易的经(踩)验(坑)

完事开通难,先看CSS的border应用有哪些属性,使用谷歌或者火狐打开一个网页,F12,属性那是相当的多,不过从border-left-*这些的来看,肯定是细致到某一部分,压缩一下可以少1/3

创建一个div,按颜色区分看边框的分布情况,直观的感受一下

<div class="border-demo border-init"></div>

.border-init {

border-color: red green yellow blue;

}

充分的发挥想象力,一个信封就出来了,高度40px,宽度随窗口的宽度,边框的颜色取值border-color::上 右 下 左 顺时针方向渲染

再给div外层加一个div限制一下宽度比如80px

.border-outter { width: 80px; }

.border-demo {

border: solid 40px;

}

//以上样式后面一直要用,就不重复写了

.border-init {

border-color: red green yellow blue;

}

<div class="border-outter">

<div class="border-demo border-init"></div>

</div>

画重点:左右两边的边框宽度都是40px,反应到css外层的div宽度刚好是80px,完美的包裹。

到这一步,基本的规则形状特别是三角形可以全部搞定了,只需稍微调整边框的宽度,举个栗子,我们想得到一个右三角,即箭头朝右

这个时候只需要把左侧边框显示出来就可以,其他的边框设为透明

  <div class="border-outter">
    <div class="border-demo border-left"></div>
  </div>
  .border-left {
   border-color: transparent transparent transparent blue;   
  }  

大多数情况下,div盒子的内容不会空,我们加一个小小的高度

<div class="border-demo border-init"></div>

.border-ladder {

height: 10px;

border-color: red green yellow blue;

}

调整各边框的色值,既可以得到不同方向的梯形,到这一步,我们基本没有做什么事情已经可以获得三角形和梯形这样的样式

分割线------------------------------------------------------------------------

爱美之心人皆有之, 直来直去,有棱有角总让人感觉不舒服,那就委婉一些,这个时候border-radius就要上场,上面的栗子添加圆弧

<div class="border-demo border-init"></div>

.border-init {

border-color: red green yellow blue;

 border-radius: 50%;

}

一个四边框弧度为50%的div出来了,一个椭圆就这么出来,一个接近青蛙头像的盒子产生

.border-init {

border-color: red green yellow blue;

 border-radius: 50%;

}

<div class="border-outter">

<div class="border-demo border-init"></div>

</div>

这就是一个标准的圆形,有了圆形,那扇形就不远了:

  <div class="border-outter">
    <div class="border-demo border-sector"></div>
  </div>
  .border-sector {
   border-color: transparent transparent transparent blue;   
  }  

结合CSS3动画,一个雷达扫描图就出来了

事实上,border-radius的取值未必就是px,可以通过百分比的形式获取各种形状,典型格式可能值

border-radius: 30px;

border-radius: 25% 10%;

border-radius: 10% 30% 50% 70%;

border-radius: 10% / 50%;

border-radius: 50% 20% / 10% 40%;

举个栗子

微信红包页顶部的圆弧形背景

 <div class="border-demo border-bonus"></div>
  .border-bonus {
   background: red;
    border-color: red;
    border-radius: 50% 50% 50% 50%/ 0 0 50% 50%;
  }

CSS边框使用-基础的更多相关文章

  1. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  2. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  3. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  4. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  5. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

  6. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.声明边框 边框的声明有 ...

  7. (1) css的核心基础

     css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg ...

  8. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  9. CSS 边框

    CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 边框样式 边框样式属性指定要显示什么样的边界.  border-style属性用来定义边框的样式 border-style 值: ...

随机推荐

  1. vue template标签

    在普通的html里面: template标签默认有个 display:none; 属性,并且其里面的内容是不可见的. 在vue里面: template标签类似一个隐藏的div,在审查元素的时候是找不到 ...

  2. 10分钟彻底理解Redis的持久化机制:RDB和AOF

    作者:张君鸿 juejin.im/post/5d09a9ff51882577eb133aa9 什么是Redis持久化? Redis作为一个键值对内存数据库(NoSQL),数据都存储在内存当中,在处理客 ...

  3. 【UR #5】怎样更有力气

    Problem Description 大力水手问禅师:"大师,很多事情都需要用很大力气才能完成,而我在吃了菠菜之后力气很大,于是就导致我现在非常依赖菠菜.我很讨厌我的现状,有没有办法少吃点 ...

  4. event demo

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. C# 调用POST请求

    public static void PostUrl_Ex(string url, string postData) { try { //对于提交内容中的中文使用UrlEncode方式编码 发送 // ...

  6. Netty服务端Channel注册Selector及绑定服务器端口

    当服务端Channel 创建并且初始化完成之后,会将其注册到 selector,通过语句config().group().register(channel)进行注册工作,该方法最终调用 Abstrac ...

  7. MyBatis框架之第二篇

    1.高级参数映射和返回值映射(重点) a)Pojo包装pojo的参数映射 b)当结果集列名与pojo属性名不一致的返回值映射 2.动态sql(重点) 3.关联查询结果(重点) a)一对一关联结果 b) ...

  8. BASE64Encoder cannot be resolved to a type类似问题的解决办法

    我们有时候会碰见在JDK或者其他jar包中提供了某方法或者类,接口,而开发工具仍然报红,无法使用该类或者方法,那是应为我们的编译器没有识别,或者没有支持某些方法或者类 这个时候需要我们手动的开启.具体 ...

  9. Bootstrap基本CSS样式

    一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...

  10. Ubuntu16.0 GTX1660Ti 安装NVIDIA CUDA cuDNN Tensflow

    主要参考这篇文章Ubuntu16.04(GTX1660ti)cuda10.0和cudnn7.6环境配置 (环境乃一生之敌!!!). 容易错的点: 安装NVIDIA驱动的时候选择run版本,不要选择de ...