<!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. MySQL高级知识（四）——Explain

    前言:explain(执行计划),使用explain关键字可以模拟优化器执行sql查询语句,从而知道MySQL是如何处理sql语句.explain主要用于分析查询语句或表结构的性能瓶颈. 注:本系列随 ...

  2. 设计模式のNullObjectPattern（空对象模式）----行为模式

    一.产生背景 在空对象模式(Null Object Pattern)中,一个空对象取代 NULL 对象实例的检查.Null 对象不是检查空值,而是反应一个不做任何动作的关系.这样的 Null 对象也可 ...

  3. DataGrid获取单元格的值

    string str = (dataGrid.Columns[0].GetCellContent(dataGrid.Items[0]) as TextBlock).Text;

  4. Java NIO1：浅谈I/O模型

    一.什么是同步?什么是异步? 同步和异步的概念出来已经很久了,网上有关同步和异步的说法也有很多.以下是我个人的理解: 同步就是:如果有多个任务或者事件要发生,这些任务或者事件必须逐个地进行,一个事件或 ...

  5. （转）MySQL慢查询分析优化 + MySQL调优

    .long_query_time的默认值为10,意思是运行10S以上的语句. .临时设置开启慢查询日志 mysql> show variables like '%slow_query_log%' ...

  6. centos 7 安装mqtt 修改用户名和密码

    我先新买个Centos 的系统 咱登录呢就用这个软件,主要是方便,可以少安装一些东西 根据自己的系统选择,上面的是32位的. 输入 root 回车 输入密码然后回车  输入的时候什么也不显示 输入 c ...

  7. 串行FLASH文件系统FatFs---转自野火论坛

    为了支持长文件名,需要用到FATFS源码中的cc936.c的两个函数ff_convert,ff_wtoupper:这里面直接用了两个大数组(127KB)来做unicode转gbk(OEM)的对照表,这 ...

  8. OdnShop 发布 V1.0 正式版，完整可用的开源微商城系统

    OdnShop是基于ASP.NET 4.0+Mysql开发的开源微商城系统,我们的目标是构建一个核心完善而又轻量级的微商城平台. 本版本更新功能: 1,修正数据库操作的部分表名称的表前缀错误: 2,修 ...

  9. Omi 拥抱 60FPS 的 Web 动画

    写在前面 Omi 框架 正式发布了 → omi-transform. Made css3 transform super easy. Made 60 FPS easy. 作为 Omi 组件化开发特效运 ...

  10. functools下的partial模块应用

    问题 你有一个被其他python代码使用的callable对象,可能是一个回调函数或者是一个处理器, 但是它的参数太多了,导致调用时出错. 解决方案 如果需要减少某个函数的参数个数,你可以使用 fun ...