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. Spring Boot配置方式

    Spring提供了xml.注解.Java配置.groovy配置实现Bean的创建和注入. 配置元数据 无论xml配置.注解配置还是Java配置,都被称为配置元数据,所谓元数据即描述数据的数据.元数据本 ...

  2. 解决ssh无操作自动断开[转载，已经验证]

    用SSH远程,如果几分钟没有任何操作,连接就会断开,必须重新登陆才行,非常麻烦,一般修改2个地方3项即可解决问题: 1.终端键入:echo $TMOUT       如果显示空白,表示没有设置,等于使 ...

  3. 用 Gearman 分发 PHP 应用程序的工作负载【转载】

    通过本文,了解工作分发系统 Gearman 并分发用 PHP.C.Ruby 及其他受支持语言编写的应用程序的工作负载. 尽管一个 Web 应用程序的大部分内容都与表示有关,但它的价值与竞争优势却可能体 ...

  4. Es首页

    https://www.elastic.co/guide/en/elasticsearch/reference/index.html

  5. Codeforces 660E Different Subsets For All Tuples【组合数学】

    看了官方题解+q神的讲解才懂... 智商问题.. 讲道理..数学真的比脱单难啊... 题目链接: http://codeforces.com/problemset/problem/660/E 题意: ...

  6. 洛谷——P1551 亲戚

    题目背景 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 题目描述 规定:x和y是亲戚,y和z是亲戚,那么x和z也是亲戚.如 ...

  7. jsoup 提取 html 中的所有链接、图片和媒体

    原文:http://www.open-open.com/code/view/1420729333515 package org.jsoup.examples; import org.jsoup.Jso ...

  8. 【python】搜索引擎方面的资料

    http://blog.csdn.net/hguisu/article/category/1230933

  9. [RxJS] Implement RxJS `concatMap` by Waiting for Inner Subscriptions to Complete

    Unlike mergeMap and switchMap, concatMap focuses on when "inner" subscriptions "compl ...

  10. 【转载】C# 装箱和拆箱[整理]

    1.      装箱和拆箱是一个抽象的概念 2.      装箱是将值类型转换为引用类型 :拆箱是将引用类型转换为值类型       利用装箱和拆箱功能,可通过允许值类型的任何值与Object 类型的 ...