: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. Storm drpc学习

    示例代码: package com.lky.test; import org.apache.commons.logging.Log; import org.apache.commons.logging ...

  2. 如何右键新建HTML

    直接转载的,原文作者写的很详细:http://blog.csdn.net/ruanjiayou/article/details/51284864 14年在qq日志里写过 2014-10-25  htt ...

  3. SSO跨域解决方案

    单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可 以将 ...

  4. Android利用setLayoutParams在代码中调整布局(Margin和居中)

    我们平常可以直接在xml里设置margin,如: <ImageView android:layout_margin="5dip" android:src="@dra ...

  5. UVA 714 Copying Books 最大值最小化问题 （贪心 + 二分）

      Copying Books  Before the invention of book-printing, it was very hard to make a copy of a book. A ...

  6. DFBle.swift

    ////  DFBle.swift//  DFBle////  Created by LeeYaping on 15/9/2.//  Copyright (c) 2015年 lisper. All r ...

  7. 封装curl类，post get方法实现网站请求

    <?phpclass RamDemo{    //get方法    function RamGet($url,$arr)    {        if($arr!=''){           ...

  8. asp.net 5.0微信支付

    (原文出自:http://lib.csdn.net/article/wechat/46329) 微信支付官方坑太多,我们来精简 我把官方的代码,打包成了 an.wxapi.dll. 里面主要替换了下注 ...

  9. JavaScript对象属性 constructor

     对象属性 constructor 属性返回对创建此对象的数组函数的引用; constructor(构造函数) 在对象创建或实例化时候被调用的方法.通常使用该方法来初始化数据成员和所需资源.构造函数不 ...

  10. Error:Could not determine Java version-- 关于Android Studio JDK设置和JVM version设置

    最近在装AS的时候遇到一个问题,新建工程后,编译报错,Error:Could not determine Java version 不言而喻:可定是JDK的问题,网上查到2中可能性 第一:就是JDK路 ...