border会占据空间;如果想加边框效果，但是又不占用空间，可以使用box-shadow来模拟

demo

div 100*100 border：10px solid red;

可以写：

div 100*100 box-shadow：0 0 10px solid red;

加圆角

box-radius：10px;

也可以使用outline

outline: 2px solid #26C2A7;
加圆角：outline-radius:10px; PS:outline-radius只有火狐支持，目前的使用需要加-moz-前缀，别的浏览器不支持 呵呵呵

box-shadow 模拟border的更多相关文章

  1. CodeForces 388A Fox and Box Accumulation (模拟)

    A. Fox and Box Accumulation time limit per test:1 second memory limit per test:256 megabytes Fox Cie ...

  2. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  3. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  4. CSS魔法堂：重拾Border之——解构Border

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  5. CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  6. HTML学习笔记——box

    1> HTML写法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  7. CSS3弹性伸缩布局(一)——box布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...

  8. 重新认识Box Model、IFC、BFC和Collapsing margins

    尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...

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

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

随机推荐

  1. Vim pre-work

    1.先学会touch typing盲打是一切的基础 重点在于手眼协调 如果实现不了盲打.一切高效率的Vim操作都将无从做起 2.vim的使用 2.1.hjkl的移动 推荐练习贪吃蛇  和3D平衡球   ...

  2. JS变量写到HTML页面中并修改变量值(前台处理数据序号问题)

    有时候我们在前台需要对序号进行处理,我们需要将JS变量写到页面中进行显示. 第一种方式:后台处理 第二种方式:JS中定义全局变量,然后进行显示,可以书写一个JS函数对不同的需要进行不同的替换,也就可以 ...

  3. 蓝桥杯 算法提高 金属采集 [ 树形dp 经典 ]

    传送门 算法提高 金属采集 时间限制:1.0s   内存限制:256.0MB     锦囊1   锦囊2   锦囊3   问题描述 人类在火星上发现了一种新的金属!这些金属分布在一些奇怪的地方,不妨叫 ...

  4. Java使用IText(VM模版)导出PDF

    Java使用IText(VM模版)导出PDF: public String createPDF(ProjectManageBase projectManageBase) { Map map = new ...

  5. 【Java源码】集合类-优先队列PriorityQueue

    一.类继承关系 public class PriorityQueue<E> extends AbstractQueue<E> implements java.io.Serial ...

  6. 石家庄地铁查询PSP0级

    一.需求   :地铁(石家庄地铁)线路查询 二.       学生:洪鼎淇 合作对象:宋子健 时间记录日志: 日期 开始时间 结束时间 中断时间 净时间 活动 2019/3/30 10:00 14:0 ...

  7. java基础 4 继承（1）抽象类与接口的区别

    抽象类: 是用来捕捉子类的通用特性的,至少包含一个抽象方法,该抽象方法必须在子类中实现,由于抽象类没有抽象方法的具体实现,因此不能对抽象类进行实例化. 接口: 定义了一组方法,是抽象方法的集合,但是接 ...

  8. B/S(WEB)系统中使用Activex插件调用扫描仪实现连续扫描并上传图像(IE文件扫描并自动上传)

    IE浏览器下使用Activex插件调用客户端扫描仪扫描文件并山传,可以将纸质档案(如合同.文件.资料等)扫描并将扫描图像保存到服务器,可以用于合同管理.档案管理等. 通过插件方式调用扫描仪扫描并获取图 ...

  9. Python pandas学习笔记

    参考文献:<Python金融大数据分析> #导入模块 import pandas as pd #生成dataframe df = pd.DataFrame([10,20,30,40], c ...

  10. 还原数据库出现“未获得排他訪问”解决方法（杀死数据库连接的存储过程sqlserver）

    在master数据库下创建存储步骤例如以下: createproc killspid (@dbnamevarchar(20)) as begin declare@sqlnvarchar(500) de ...