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. bzoj3514 Codechef MARCH14 GERALD07加强版 lct预处理+主席树

    Codechef MARCH14 GERALD07加强版 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 1951  Solved: 746[Submi ...

  2. 【Educational Codeforces Round 48】

    A:https://www.cnblogs.com/myx12345/p/9843001.html B:https://www.cnblogs.com/myx12345/p/9843021.html ...

  3. hihoCoder #1014 : Trie树 [ Trie ]

    传送门 #1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互 ...

  4. 解决WIN7下VMWARE虚拟机无法上网问题

    一.Win7 虚拟机centos NAT联网 链接地址:http://www.cr173.com/html/19808_1.html,也不知道是哪位大神弄的,实践过,可以使用,但是重启之后却不能用了, ...

  5. SQLAlchemy的group_by和order_by的区别

    1.官网解释: group_by(*criterion) apply one or more GROUP BY criterion to the query and return the newly ...

  6. iOS设计模式 - (1)概述

    近期可自由安排的时间比較多, iOS应用方面, 没什么好点子, 就先放下, 不写了.花点时间学学设计模式. 之后将会写一系列博文, 记录设计模式学习过程. 当然, 由于我自己是搞iOS的, 所以之后设 ...

  7. Office EXCEL 如何为宏命令指定快捷键或者重新设置快捷键

    1 工具-宏-宏,打开宏窗口   2 鼠标单击任意宏将其选中,点击宏选项,即可修改或为他增加快捷键.   3 注意,你直接在Visual Basci编辑器里面改是不行的,因为加了'的只是注释而已  

  8. Codeforces 344B Simple Molecules

    #include<bits/stdc++.h> using namespace std; int main() { int a,b,c; scanf("%d%d%d", ...

  9. GLib-GObject-WARNING **: Two different plugins tried to register

    使用 Ubuntu vivid 的 glib-2.44.1 的程序总是打印类似这种警告: GLib-GObject-WARNING **: Two different plugins tried to ...

  10. php事务操作示例

    <?php //数据库连接 $conn = mysql_connect('localhost', 'root', '');mysql_select_db('test', $conn); /* 支 ...