: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. Codeforces Round #FF (Div. 2)__E. DZY Loves Fibonacci Numbers (CF447) 线段树

    http://codeforces.com/contest/447/problem/E 题意: 给定一个数组, m次操作, 1 l r 表示区间修改, 每次 a[i] +  Fibonacci[i-l ...

  2. java中的浮点（float）运算

    一.  关于浮点运算,需要说明的几点: 1.  在java中,进行浮点运算并不会处理例外情况,所以,即使除数为0,也不会有例外被抛出; 2.  当运算结果是溢出(Infinity)时,结果为Infin ...

  3. java中小工具————UUID

    示例代码: package com.lky.test; import java.util.UUID; import org.junit.Test; /** * @Title: testUUID.jav ...

  4. Hello,world,l'm coming!

    #include<studio.h> int main() { printf("Hello,Word!" l'm coming\n"); return0; }

  5. SQL Server 2008 导出数据与导入数据任务介绍

    一. 实例数据库介绍 源数据库Test_Other_DB:存在tb_Class,tb_Student,tb_TestTable三张表. 目标数据库TestDB_Output:空库,不含任何表. 二. ...

  6. IE浏览器开启对JavaScript脚本的支持

    在IE浏览器的"工具"菜单中选择"internet选项",在弹出命令对话框中选择"安全"选项卡.在该选项卡下的"该区域的安全级别& ...

  7. [Javascript] Array methods in depth - indexOf

    indexOf is used to search for a value or reference inside of an array. In this lesson we first look ...

  8. 用C/C++扩展你的PHP(转)

    简 介 英文版下载: PHP 5 Power Programming PHP取得成功的一个主要原因之一是她拥有大量的可用扩展.web开发者无论有何种需求,这种需求最有可能在PHP发行包里找到.PHP发 ...

  9. IntelliJ IDEA 的Project structure说明

    IntelliJ IDEA 的Project structure可以在File->Project structure中打开,同时,在新建项目是IDE一般用向导的方式让你填写Project str ...

  10. Java基础知识强化58：经典排序之二叉树排序（BinaryTreeSort）

    1. 二叉树排序 二叉树排序的描述也是一个递归的描述, 所以二叉树排序的构造自然也用递归的: 二叉排序树或者是一棵空树,或者是具有下列性质的二叉树: (1)若左子树不空,则左子树上所有结点的值均小于它 ...