在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果,并且可以设置多组效果,每组参数值用逗号隔开。如果把box-shadow特性的两个偏移量 h-shadow 、v-shadow设置为0,将模糊值blur也设置为0,此时增加扩张半径,就会使元素的投影变为实线边框。这样就可以模拟多边框效果了,首先看下box-shadow语法和参数。

box-shadow语法:

box-shadow:x-shadow  y-shadow  blur  spread  color  inset;

参数说明:

  • x-shadow:设置对象的阴影水平偏移值,单位可以是px、em或百分比等,允许负值。
  • y-shadow:设置对象的阴影垂直偏移值,单位可以是px、em或百分比等,允许负值。
  • blur:用于设置边框阴影半径大小。
  • spread:扩展半径,设置阴影的尺寸;这个参数可选,缺省时值为0。
  • color:设置阴影的颜色;
  • inset:这个参数默认不设置。默认情况下为外阴影,inset表示内阴影。

box-shadow实现多边框:

div{
box-shadow: 0 0 0 10px red,
        0 0 0 16px green,
        0 2px 5px 16px rgba(0,0,0,.5);
background: yellowgreen;
}

效果如下:

熊猫办公https://www.wode007.com/sites/73654.html

outline实现

如果我们只需要2层边框,那么使用outline是不错的选择,先设置常规的border边框,再加上outline(描边)。而且outline比上面的box-shadow还有一大优点就是,可以生成虚线等边框。通常outline属性需要和对应的描边偏移outline-offset来实现。

div{
width: 200px;
height: 100px;
background: #ffffff;
border: 5px solid #53cfa2;
outline: #736e21 dashed 1px;
outline-offset: -20px;
}

效果如下:

css实现div多边框_box-shadow模拟多边框、outline描边实现的更多相关文章

  1. css美化Div边框的样式实例*(转载)

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  2. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  3. CSS教程:div垂直居中的N种方法[转]

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  4. HTML CSS 中DIV内容居中汇总

    转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...

  5. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

  6. css一div内文字居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  7. css 中 div垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. div向右偏移设置 css让div靠右移一定距离

    转自:https://www.thinkcss.com/shili/1372.shtml div对象盒子向右偏移设置,使用css让div靠右一定距离-div向右移教程实例篇 div向右偏移一定距离,可 ...

  9. CSS之div和span标签

    div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...

随机推荐

  1. java实现 洛谷 P1014 Cantor表

    题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 - 2/1 2/2 2/3 2/4 - ...

  2. java实现蓝桥杯密码脱落

    一 问题描述 X星球的考古学家发现了一批古代留下来的密码. 这些密码是由A.B.C.D 四种植物的种子串成的序列. 仔细分析发现,这些密码串当初应该是前后对称的(也就是我们说的镜像串). 由于年代久远 ...

  3. TZOJ 数据结构实验--静态顺序栈

    描述 创建一个顺序栈(静态),栈大小为5.能够完成栈的初始化.入栈.出栈.获取栈顶元素.销毁栈等操作. 顺序栈类型定义如下: typedef struct {  int data[Max];    i ...

  4. [RH134] 12-系统启动

    1.系统启动流程 开机--->BIOS自检(需要检测的设备是否正常)--->磁盘的MBR分区--->BootLoader(引导加载器)加载内核--->识别各分区的文件系统 2. ...

  5. el-upload配合vue-cropper实现上传图片前裁剪

    需求背景 上传一个封面图,在上传之前需要对图片进行裁剪,上传裁剪之后的图片,类似微信的上传头像. 技术方案 上传肯定是用element的 el-upload 组件实现上传,非常方便,各种钩子函数. 裁 ...

  6. 河青的持久层框架hqbatis

    谈到对数据库的操作,powerbuilder 的嵌入式SQL还是最方便的,增.删.改.查都无比的方便,可惜它落败于BS架构的盛起.java 以mvc的框架,实现对数据库的操作,写起来是相当麻烦,jav ...

  7. Centos6,Centos7防火墙设置与端口开放的方法

    Centos升级到7之后,内置的防火墙已经从iptables变成了firewalld.端口的开启还是要从两种情况来说明的,即iptables和firewalld. 一.iptables 1.打开/关闭 ...

  8. kafka架构、基本术语、消息存储结构

    1.kafka架构 kafka处理消息大概流程 生产者发送消息给kafka服务器 消费者从kafka服务器(broker)读取消息 kafka服务器依靠zookeeper集群进行服务协调管理 2.ka ...

  9. Jackson乱码问题

    在配置文件中加入下面的内容 <!-- Json乱码问题配置--> <mvc:annotation-driven> <mvc:message-converters regi ...

  10. Spark文档阅读之二:Programming Guides - Quick Start

    Quick Start: https://spark.apache.org/docs/latest/quick-start.html 在Spark 2.0之前,Spark的编程接口为RDD (Resi ...