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. hdu 2167 状态压缩

    /*与1565的解法差不多*/ #include<stdio.h> #include<string.h> int map[16][16]; int dp[2][1<< ...

  2. Sencha Touch 2 实现跨域访问

    最近要做手机移动App,最后采用HTMML5来做框架用Sencha Touch,在数据交互时遇到了Ajax跨域访问,在Sencha Touch 2中,实现跨域访问可以使用Ext类库提供给我们的类Ext ...

  3. [JSP]自定义EL函数以及使用

    有时候在JSP页面需要进行一连串的字符串的处理,需要进行自定义EL函数. 先看EL函数的tld文件: standard.jar下面: 自定义EL函数: 1.编写EL函数(全是public static ...

  4. ArrayList去除重复元素

    去除一个ArrayList的重复元素有两种方法:(ArrayList与Vector的存储结构是Object[],LinkedList是双向列表) 第一种是不需要借助临时list,用equals方法比较 ...

  5. Android应用程序项目结构

    Android应用程序项目结构 [src]:JAVA源代码目录 [gen]:由系统自动生成的JAVA源码文件,不可修改,只可查看和使用 加载的和依赖的类库 [assets]:本地存储文件的一个文件夹 ...

  6. 用Google Analytics UTM标注社会化媒体分享流量来源

    随着社会化媒体营销概念近两年的日益盛行,敢于吃螃蟹的营销工作者们展开了一些尝试,发现对社会化营销效果进行综合评估是一大难点,价值难以衡量.主要原因在于它的营销效果中混杂了直接的目标转化.品牌宣传.品牌 ...

  7. [Bzoj1069][Scoi2007]最大土地面积（凸包）（旋转卡壳）

    1069: [SCOI2007]最大土地面积 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 3629  Solved: 1432[Submit][Sta ...

  8. DTRACE FOR MYSQL PHP

    Using DTrace to troubleshoot Apache DTrace for MySQL , Inspecting MySQL with DTrace , MySQL DTrace P ...

  9. Oracle 10g 升级至10.2.0.4

    http://weihaoluo.blog.163.com/blog/static/224418832010112102355652/   单实例环境 Vmware Server 1.0.6 +Cen ...

  10. 【Nginx】如何建立新连接

    处理新连接事件的回调函数是ngx_event_accept,原型如下: void ngx_event_accept(ngx_event_t *ev) 具体流程如下: 1)首先调用accept方法试图建 ...