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. react.js 组件之间的数据传递props

    /* *属性 * 1.如何传递属性 * 2.属性和状态区别和联系 * * 3.子组件都有一个props属性对象 * * 4.单线数据流(只能从父组件流向子组件,就是在父组件定义一个属性,子组件可以通过 ...

  2. python学习之-- mysql模块和sqlalchemy模块

    简单介绍python下操作mysql数据库模块有2个:pyhton-mysqldb  和 pymysql 说明:在python3中支持mysql 的模块已经使用pymysql替代了MysqlDB(这个 ...

  3. csu - 1659 Graph Center(最短路)

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1659 题意是找一个图的中心,图的中心定义是某一个点到其他点的最大距离最小,如果有多个排序输出. 注 ...

  4. 【小记事】解除端口占用（Windows）

    开发中有时会因为端口占用而导致起项目时报错(如下图),这时候只要解除端口占用即可. 解除端口占用: 1.打开cmd(win+r),查看端口占用情况 netstat -ano | findstr 端口号 ...

  5. Two Sum（hashtable）

    Given an array of integers, find two numbers such that they add up to a specific target number. The ...

  6. Spring AOP Capability and Goal

    AOP Capability: 1.Spring声明式事务管理配置. 2.Controller层的参数校验. 3.使用Spring AOP实现MySQL数据库读写分离案例分析 4.在执行方法前,判断是 ...

  7. 关于maven多个模块的build顺序 [INFO] Reactor Build Order

    对于一个maven项目,如果有多个模块,那么它们的执行顺序是什么样的呢? 在执行mvn操作的时候,你可以看到如下信息,这个便是maven的build顺序 那么maven是如何决定顺序的呢?如下: 在多 ...

  8. &quot;undefined reference to strptime&quot;之自己定义strptime函数

    简单介绍   strptime()函数可以依照特定时间格式将字符串转换为时间类型.简单点说可以将字符串时间转化为时间戳. 这个函数包括在time.h头文件里,在Unix或者类Unix系统中,我们会常常 ...

  9. 纠结的链接——ln、ln -s、fs.symlink、require

    纠结的链接--ln.ln -s.fs.symlink.require 提交 我的留言 加载中 已留言 inode 我们首先来看看 linux 系统里面的一个重要概念:inode. 我们知道,文件存储在 ...

  10. [Angular] Modify User Provided UI with Angular Content Directives

    If we’re going to make our toggle accessible, we’ll need to apply certain aria attributes to the con ...