如果现在有个需求，让你实现下面的样式，你会怎么做呢？

　　

　　我首先想到的是用 border + box-shadow 实现，代码如下

                div {

                margin: 50px auto;

                width: 200px;

                height: 100px;

                background: #655;

                border-radius: 5px;

                border: 1px dashed #fff;

                box-shadow: 0 0 0 10px #655;

            }

　　  当时，我个人认为没有其它方法可以实现了，直到后面在《css揭秘》一书当中看到了另外的方法，顿时豁然开朗

　　 这个方法是用 css的 outline + outline-offset 属性来实现的

　　 下面，我用自己的理解来说说这个2属性是什么，因为官方的解释对不熟悉这2个属性的人来说会有点懵

　　简单来说，outline属性等同于border，都可以绘制边框，可以看作是一条始终包裹在border外的边框，如下图

　　如上图，棕色是border，桃红色是 outline，只要border和outline属性同时作用于同一个元素，outline绘制的边框始终会在border外面

　   另外，如果你想给一个元素增加一条边框，使用 outline 或 border 都可以

　  

　　在来说说outline-offset属性，可以简单理解为控制outline绘制的边框和border边框之间的距离，如下图

　　

　　另外，outline-offset属性还可接收负值，正是这个特性，让我们能够实现缝边的效果，代码如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            div {

                margin: 50px auto;

                width: 200px;

                height: 100px;

                background: #655;

                border-radius: 5px;

                outline: 1px dashed #fff;

                outline-offset: -15px;

            }

        </style>

    </head>

    <body>

        <div></div>

    </body>

</html>

　　

　　

　　

outline和outline-offset属性实现简单的缝边效果的更多相关文章

  1. 实例级别和类级别的static、构造函数、字段属性的简单介绍

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 实例级别 ...

  2. HTML表格属性及简单实例

    这里主要总结记录下表格的一些属性和简单的样式,方便以后不时之需. 1.<table> 用来定义HTML的表格,具有本地属性 border 表示边框,border属性的值必须为1或空字符串( ...

  3. 使用CSS实现一个简单的幻灯片效果

    方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html&g ...

  4. 【从无到有】教你使用animation做简单的动画效果

    今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...

  5. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  6. 第107天：Ajax 实现简单的登录效果

    使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...

  7. 有趣的css—简单的下雨效果2.0版

    简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...

  8. jQery简单Tab选项卡效果

    简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  9. Cocos2d-x实现简单的翻牌效果

    触发器互联网影响找了很多.有自己的点重写一个复杂的sprite类来实现.简单的操作来对引擎的使用CCOrbitCamera实现,但是,也存在一些问题,后变反了. 我在用的仅仅是一个简单的翻牌效果,点击 ...

随机推荐

  1. webpack 打包问题

    Project is running at http://localhost:8080/webpack output is served from /dist/webpack: wait until ...

  2. matplotlib -- 基础知识

    matplotlib 组织图表的方式 最上层是一个 Figure 实例,包含了所有可见的和其他一些不可见的内容.该 Figure 实例包含了一个 Axes 实例的成员属性 Figure.axes,同时 ...

  3. shapefile添加字段 设置文件名为字段内容

    转眼间,这一年又结束了,再记录一点知识吧 同事说他有好多shapefile,想给每个shapefile添加一字段,并设置该字段的内容为shapefile文件名,想着用arcpy实现,于是有了下面的代码 ...

  4. jsp中的四个作用域，九个内置对象分别是什么?

    九大内置对象: 内置对象(又叫隐含对象),就是在jsp中,不需要创建(由服务器<容器>来创建),可以直接使用的对象. 对象 含义 类 作用域 request 请求对象 类型 javax.s ...

  5. fiddler不能抓某些的包的原因

    用fiddler抓某app的包时,死活抓不到,确定自己设置的没有错,并且让小A同事也看了一遍我的设置,确认没错后,又在小A同事那儿试了下还是抓不到 后来在网上找了很多资料,才发现是因为一些app使用了 ...

  6. flink引出的kafka不同版本的兼容性

    参考: 官网协议介绍:http://kafka.apache.org/protocol.html#The_Messages_Fetch kafka协议兼容性  http://www.cnblogs.c ...

  7. PAT DFS，BFS，Dijkstra 题号

    为什么要分类刷题: 因为刷⼀道算法题需要花⼀两个⼩时甚⾄半天,平时我们还要上课做别的事情,你在⼀段时间内刷算法如果只按照顺序,可能今天遇到了⼀道最短路径的题⽬,弄了半天好不容易看懂了别⼈的代码,以为⾃ ...

  8. table增删改查操作--jq

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 关于Asp.net事件，如何在触发子控件的事件时，同步触发父页面的事件

    对页面引用自定义控件后,通过绑定自定义事件,页面绑定子控件的事件,在子控件做了某些修改动作后,如何同步操作父页面的方法:下面我煮了个栗子,同学们可以来尝一尝试一试 a.aspx 引用 UserCont ...

  10. php面试题--并列排名问题

    给定一个二维数组: <?php $data = [ ['name' =>'j1', 'score' => '80'], ['name' =>'j2', 'score' => ...