: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. JDBC连接mysql编程

    基本操作 package jdbc; import java.sql.Statement; import java.util.Scanner; import java.sql.Connection; ...

  2. JDBC之ResultSet

    ResultSet is a interface More gnerally,ResultSet is a class involves a table returned by executeQuer ...

  3. StoryBoard页面联线跳转已经页面之间传参数

    1.选中上图黄色.按住Control 把线拖到要要跳转的页面,寻找show. 2.选中联线.在右边Identifier:随便填入一个标示 3.在按钮点击事件加上如下代码 - (IBAction)but ...

  4. windows下配置caffe(环境：win7+vs2013+opencv3.0)

    说明:大部分转载于initialneil的大作Caffe + vs2013 + OpenCV in Windows Tutorial (I) – Setup 准备工作: 1.下载CUDA7.5: ht ...

  5. [React] React Router: IndexRoute

    IndexRoute allows us to define a default child component to be rendered at a specific route when no ...

  6. tomcat端口号、日志、启停

    cd到tomcat目录下 1.[root@rusky bin]# ./shutdown.sh         关闭tomcat 2.[root@rusky bin]# ./startup.sh     ...

  7. Ubunte 11.4 下安装 SSH遇到的问题

    第一次安装报了一堆错,主要是也http 404 not found之类的,搜索了一番怀疑是apt的source list的问题. 网上找到一份替换之,我用的是搜狐的服务器.网址如下: http://b ...

  8. Resharper

    http://baike.baidu.com/link?url=H8DVtrvKV1Cg-Hrz82C6ZiJOUXbi_3BfoROe-RlHhctPna4-BFfglPh2OsR-KmCqRZ7_ ...

  9. iOS开发中的MVC设计模式

    我们今天谈谈cocoa程序设计中的 模型-视图-控制器(MVC)范型.我们将从两大方面来讨论MVC: 什么是MVC? M.V.C之间的交流方式是什么样子的? 理解了MVC的概念,对cocoa程序开发是 ...

  10. C#多线程实践——线程同步

    下面的表格列展了.NET对协调或同步线程动作的可用的工具:                       简易阻止方法 构成 目的 Sleep 阻止给定的时间周期 Join 等待另一个线程完成      ...