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. 常见的 Android 新手误区

    在过去十年的移动开发平台中,作为资深的移动开发人员,我们认为Android平台是一个新手最广为人知的平台.它不仅是一个廉价的工具,而且有着良好的 开发社区,以及从所周知的编程语言(Java),使得开发 ...

  2. Android菜单

    Android菜单概述 菜单是Activity的一个重要组成部分,它为用户操作提供了快捷的途径.Android提供了一个简单的框架来向程序中添加标准菜单 . 一.创建一个菜单资源 你需要在一个XML ...

  3. 2017-10-04-afternoon

    注意完全平方数统计时的特判 #include <cstdio> inline void read(int &x) { x=; register char ch=getchar(); ...

  4. MAC地址泛红攻击

    一.环境 IP地址: Windows10   IP:10.13.153.55 Windows7:   IP:192.168.83.130 Linux:       IP:192.168.83.129 ...

  5. HDU 4279 Number（找规律）

    Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  6. 【转载】Unix设计哲学 & 回车换行八卦 & EOF八卦 & UNIX目录结构八卦

    昨天看了这篇文章 <关于Unix哲学> 首先用了两个例子,用风扇吹出空肥皂盒 和 太空铅笔,来说明简单设计也能派上作用吧. Unix哲学,Wikipedia上列出了好几个版本,不同的人有不 ...

  7. Nuget公布Dll

    今天要開始写ViewModel了,写完之后系统里的ViewModel都汇总到我这里.然后由我负责ViewModel的公布跟维护,所以Nuget公布Dll就要熟练啦~ 一,安装工具 1.Nuget Pa ...

  8. 积跬步，聚小流------Bootstrap学习记录(3)

    响应式作为Bootstrap的一大特色.栅格系统可谓是功不可没,既然如此,那我们就来看一下栅格系统是怎样帮助bootstrap实现响应式布局的呢? 1.什么是栅格系统 我们能够从Bootstrap的官 ...

  9. spinlock in linux kernel

    spinlock in linux kernel 作为一种锁机制, spinlock可以制造一段临界区, 同一时刻只有一个线程能进入这个临界区, 从而达到保护数据的目的. semaphore, mut ...

  10. 【iOS系列】-文件管理

    OC中操作文件,需要使用NSFileManager: 需要使用NSFileManager的创建方式: //单例模式创建对象 NSFileManager * f2 = [NSFileManager de ...