: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. 精美实用的jQuery插件精选

    jQuery的确是一款相当强大的Javascript框架,同时jQuery的插件就多入牛毛,如果你善于收集,那么你在写前端页面的时候肯定会更加方便.本文精选了一些精美实用的jQuery插件供大家参考. ...

  2. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  3. Filebeat中文指南

    Filebeat中文指南 翻译自:https://www.elastic.co/guide/en/beats/filebeat/current/index.html 译者:kerwin 鸣谢:tory ...

  4. lesson5:利用jmeter来压测消息队列(activemq)

    本文讲述了利用jmeter来压测消息队列,其中消息队列采用apache的activemq,jmeter本身是支持符合jms标准消息队列的压测,由于jmeter的官方sampler配置比较复杂,本文直接 ...

  5. python数据库做成邮箱的注册系统!

    #! /usr/bin/env python2.7 # -*- coding:utf-8 -*- #File:w7.py #Date:2013-7-18 #Author:wangyu import r ...

  6. HTML, CSS学习笔记（完整版）

    第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...

  7. Windows 右键快速运行命令行

    原文见:右键命令行 - yacper - 博客园 方法一:配置文件夹选项 1 打开人任意文件夹,[工具] --> [文件夹选项] --> [文件类型] --> [(无)资料夹] -- ...

  8. Oracle数据库中的blob类型解析

    Oracle的Blob字段比较特殊,他比long字段的性能要好很多,可以用来保存例如图片之类的二进制数据. 写入Blob字段和写入其它类型字段的方式非常不同,因为Blob自身有一个cursor,你必须 ...

  9. 树莓派编译C++

    首次研究树莓派~  安装的Linux 编译C++时,就出现了问题,未定义!!无法识别 查了原因是没有安装  build-essential 解决方法 sudo apt-get install buil ...

  10. Bootstrap3 入门实战

    因为公司选择了使用BootStrap3作为项目的前台展示框架,所以花了半天时间来学习Bootstrap, 如果你是第一次听说,或者说以前听说过,但没有使用过这个框架的话,希望这篇入门实战能够让你快速掌 ...