:befor、:after是CSS的伪元素，什么是伪元素呢？伪元素用于向某些选择器设置特殊效果。

我们用CSS手册可以查询到其基本的用法：

  • E:before/E::before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
  • E:after/E::after 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
  • Ie6-7 不支持
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

    <title>css_brfor_after</title>

    <style type="text/css">

        body {

            width: 300px;

            height: auto;

            display: block;

            margin: 0px auto;

            padding: 0px;

            text-align: left;

            text-decoration: none;

            background: #efeeea;

            background: linear-gradient(#f9f9f9, #cecbc4);

            background: -moz-linear-gradient(#f9f9f9, #cecbc4);

            background: -webkit-linear-gradient(#f9f9f9, #cecbc4);

            background: -o-linear-gradient(#f9f9f9, #cecbc4);

        }

        #box {

            width: 300px;

            height: 300px;

        }

            #box .relative {

                width: 288px;

                height: 288px;

                margin-left: 5px;

                margin-top: 5px;

                background-color: transparent;

                border-radius: 5px;

                -moz-border-radius: 5px;

                border: 2px solid red;

                position: absolute;

            }

                #box .relative:before {

                    width: 288px;

                    height: 248px;

                    background-color: transparent;

                    border-left: 2px solid #fff;

                    border-right: 2px solid #fff;

                    position: absolute;

                    content: '';

                    left: -2px;

                    top: 20px;

                }

                #box .relative:after {

                    width: 248px;

                    height: 288px;

                    background-color: transparent;

                    border-top: 2px solid #fff;

                    border-bottom: 2px solid #fff;

                    position: absolute;

                    content: '';

                    top: -2px;

                    left: 20px;

                }

    </style>

</head>

<body>

    <div id="box">

        <div class="relative"></div>

        <img src="ba.png" width="300" height="300" alt="心" title="心" />

    </div>

</body>

</html>

[置顶] css3 befor after 简单使用 制作时尚焦点图相框的更多相关文章

  1. [置顶] Firefox OS 学习——简单了解知识

    什么是Firefox OS ? Firefox OS 是一个为网页设计而生的能编译和独立的手机网页操作系统,我们相信在接下来的时代,网页应用将充满整个新兴操作设备,这也为当前许多网页开发者不需要太多的 ...

  2. [置顶] Git 配置SSH简单玩法？

    > 第一步下载git点击直接下载 他会检测您的系统当前是64bit还是32bit安装过程不再啰嗦反正就是Next Next Next Finish 第二步这里你可以下载TortoiseGit点击 ...

  3. [置顶] 自己写一个简单通用的Makefile

    转自:http://blog.csdn.net/u011913612/article/details/52102241 一.makefile的作用 Makefile是用于自动编译和链接的,一个工程有很 ...

  4. Delphi 窗口置顶的方法

    有几种窗口置顶的方法,简单的有: ShowWindow(窗口句柄,sw_ShowNormal); SetWindowPos(窗口句柄,HWND_NOTOPMOST,0,0,0,0,SWP_NOMOV ...

  5. css3特效第二篇--行走的线条&&置顶导航栏

    一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...

  6. html简单响应式滚动条置顶

    简单响应式滚动条置顶 一般的,让页面出现滚动条的常见方法有: overflow:auto||overflow:scroll 或者overflow-x水平滚动条和overflow-y垂直滚动条 那么现在 ...

  7. jquery——制作置顶菜单

    置顶菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. 仿照 QQ 的 cell 的左滑删除、置顶、标记未读效果

    侧滑删除.置顶.取消关注,在iOS8之前需要我们自定义,iOS8时苹果公司推出了新的API,UITableViewRowAction类,我们可以使用该类方便的制作出如下图的效果. 下面是实现的主要代码 ...

  9. ahk之路：利用ahk在window7下实现窗口置顶

    操作系统:win7 64位 ahk版本:autohotkey_L1.1.24.03 今天安装了AutoHotkey_1.1.24.03.SciTE.PuloversMacroCreator,重新开始我 ...

随机推荐

  1. DLL模块：C++在VS下创建、调用dll

    1.dll的优点 代码复用是提高软件开发效率的重要途径.一般而言,只要某部分代码具有通用性,就可将它构造成相对独立的功能模块并在之后的项目中重复使用.比较常见的例子是各种应用程序框架,ATL.MFC等 ...

  2. iperf网络测试工具

    iperf https://sourceforge.net/projects/iperf/ http://downloads.es.net/pub/iperf/ https://github.com/ ...

  3. 2017年开年的第一次比较大的安全事件： MongoDB “赎金事件”，如何看待互联网安全问题

    今天上午(2017年1月7日),我的微信群中同时出现了两个MongoDB被黑掉要赎金的情况,于是在调查过程中,发现了这个事件.这个事件应该是2017年开年的第一次比较大的安全事件吧,发现国内居然没有什 ...

  4. Android Fragment 详解（一）

    Android从3.0开始引入fragment,主要是为了支持更动态更灵活的界面设计,比如在平板上的应用.平板机上拥有比手机更大的屏幕空间来组合和交互界面组件们.Fragment使你在做那样的设计时, ...

  5. c# winform InvokeRequired 解决跨线程访问控件

    C#中禁止跨线程直接访问控件,InvokeRequired是为了解决这个问题而产生的,当一个控件的InvokeRequired属性值为真时,说明有一个创建它以外的线程想访问它. Windows 窗体中 ...

  6. Linux文件的查找

    一直以来,总是记不住文件的查找命令,今天记在博客里,希望可以记得更牢! 1.脚本文件名的查询 which命令(寻找执行文件) #which ifconfig 2.文件名的查找 whereis 命令 # ...

  7. 浅谈Java内存及GC

    目录: 1.JAVA虚拟机规范与JAVA虚拟机 2.JVM结构图 3.GC策略与原理 4.垃圾收集算法 5.回收的时机 6.垃圾搜集器 一.JAVA虚拟机规范与JAVA虚拟机 内存,是指程序运行时的数 ...

  8. Java基础知识强化33：String类之String类的获取功能

    1. String类的获取功能 int length() // 获取字符串中字符的个数(长度) char charAt(int index)//根据位置获取字符 int indexOf(int ch) ...

  9. 解析c语言背后的汇编代码

    源码 很简单的c语言代码,作用是交换两个数: #include <stdio.h> void swap(int * a, int * b) { *a = *a + *b - (*b = * ...

  10. （一）chrome扩展 - API小记

    browserAction 设置browser action的badge文字,badge 显示在图标上面 chrome.browserAction.setBadgeText({text:"i ...