<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>outline，box-shadow，border-radius</title>

<style>

    *{

        padding: 0;

        margin: 0;

    }

    .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

    * html .clearfix{zoom:1;} /* IE6 */

    *+html .clearfix{zoom:1;} /* IE7 */

.content{

    width: 1000px;

    margin: 20px auto;

}

.box1{

    float: right;

    width: 200px;

    height: 200px;

    background-color: #3c3c3c;

    outline: 10px solid #1a8f04;

    -moz-outline-radius: 6px;  /*目前只有火狐支持，且需添加前缀-moz-*/

}

    .box2 {

        margin: 50px auto;

        width: 200px;

        height: 200px;

        border-radius: 1px;

        box-shadow: 0 0 0 30px #cd0000;

        background-color: #3e8f3e;

    }

    .box3{

        width: 60px;

        height: 60px;

        border: 60px solid #3e8f3e;

        outline: 60px dotted #fff;

        outline-offset: -60px;

        background: #ccc;

    }

</style>

</head>

<body>

<div class="content clearfix">

    <div class="box1" style="margin-top: 0">

    </div>

    <div class="box1" style="margin-top: 20px">

    </div>

    <div class="box1" style="margin-top: 40px">

    </div>

</div>

<div class="box2">

</div>

<div class="box3">

</div>

</body>

</html>

outline，box-shadow，border-radius小例子的更多相关文章

  1. 前端的CRUD增删改查的小例子

    前端的CRUD增删改查的小例子 1.效果演示 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> & ...

  2. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  3. js小例子（标签页）

    运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...

  4. text-align:justify小例子

    一个使用 text-align: justify; 使元素均匀分布的小例子: <!DOCTYPE html> <html lang="en"> <he ...

  5. JS的for循环小例子

    1.输出1-100的和 var sum = 0; for(var i=1;i<=100;i++){ sum = sum + i; } document.write(sum); 2.输出1-100 ...

  6. css display table使用小例子实验

    display的下面: table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row 此元素会作为一个表格行显示(类似 <tr>) ...

  7. 前端小例子 基础js css html练习

    前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...

  8. appium webdriver 基本操作及小例子等

    #encoding=utf-8 ''' ''' #driver新建 driver=webdriver.Remote('http://localhost:4723/wd/hub',caps) #关闭dr ...

  9. springmvc入门的第一个小例子

    今天我们探讨一下springmvc,由于是初学,所以简单的了解一下 springmvc的流程,后续会持续更新... 由一个小例子来简单的了解一下 springmvc springmvc是spring框 ...

随机推荐

  1. cookie 处理 以及模拟登陆

    cookie的处理 1.手动处理: cookie封装到headers 2.自动处理: 1.获取一个session对象 2.使用session对象进行请求的发送 3.作用:在使用session进行请求发 ...

  2. elasticSearch学习安装

    资料: 1.Elasticsearch学习,请先看这一篇! https://blog.csdn.net/laoyang360/article/details/52244917 2. linux下ela ...

  3. Python：Day29 信号量、条件变量

    信号量:semaphore 信号量是用来控制线程并发数的.(理解:虽然GIL任意时刻都只有一个线程被执行,但是所有线程都有资格去抢,semaphore就是用来控制抢的GIL的数量,只有获取了semap ...

  4. 【css】max-height，min-height，height一起使用时，优先级问题

    MDN说法: max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大. max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的 ...

  5. Boost 和 Boost.Build 的设置

    问题: 安装编译完 Boost 后,如果不设置 BOOST_ROOT 和 BOOST_BUILD_PATH 则可能导致使用 bjam 时定位到 Boost 默认的路径 /usr/share/boost ...

  6. SkylineGlobe7.0.1版本 主页面如何和Popup里面的嵌入页面相互传值

    不想多说废话,直接看代码吧!(支持IE和Chrome) 主页面: function ShowPanel() { var sg = CreateSGObj(); var pp = sg.Creator. ...

  7. FIFO队列算法的C程序实现

    头文件:Queue.h #ifndef _Queue_H #define _Queue_H typedef struct QueueDef_ //队列对象定义 { u16 front; //队列头部 ...

  8. BZOJ3561 DZY Loves Math VI 莫比乌斯反演

    传送门 看到\(gcd\)相关先推式子(默认\(N \leq M\)): \(\begin{align*} \sum\limits_{i=1}^N \sum\limits_{j=1}^M (lcm(i ...

  9. BZOJ4361 isn 树状数组、DP、容斥

    传送门 不考虑成为非降序列后停止的限制,那么答案显然是\(\sum\limits_{i=1}^N cnt_i \times (N-i)!\),其中\(cnt_i\)表示长度为\(i\)的非降序列数量 ...

  10. MongoDB非关系型数据库开发手册

    一:NoSql数据库 什么是NoSQL? NoSQL,指的是非关系型的数据库.NoSQL有时也称作Not Only SQL的缩写,是对不同于传统的关系型数据库的数据库管理系统的统称. NoSQL用于超 ...