<!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. 「2017 山东一轮集训 Day5」苹果树

    「2017 山东一轮集训 Day5」苹果树 \(n\leq 40\) 折半搜索+矩阵树定理. 没有想到折半搜索. 首先我们先枚举\(k\)个好点,我们让它们一定没有用的.要满足这个条件就要使它只能和坏 ...

  2. linux学习笔记整理（四）

    第五章 Vim编辑器和恢复ext4下误删除的文件-Xmanager工具本节所讲内容:5.1 vim的使用5.2 实战:恢复ext4文件系统下误删除的文件5.3 实战:使用xmanager等远程连接工具 ...

  3. 如何征服面试官，拿到Offer [转]

    转自 https://my.oschina.net/cccyb/blog/3012768 又到了茶余饭后的时间,想想写点什么,掐指一算,噢呦,快到3月份了,职场的金三银四跳槽季又来了,不同的是今年比往 ...

  4. 深入学习Redis：Redis内存模型

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.Redis内存统计 工欲善其事必先利其器,在说明Redis内存之前首先说明如何统计 ...

  5. 【vue】vue +element 搭建项目，vue-cli 如何打包上线

    以自己的项目为例 第一步:手动修改config文件夹中的index.js文件中的build对象,将 assetsPublicPath 中的 “/” ,改为 “你实际的加载路径” 如图: 第二步:执行( ...

  6. PHP 2 语句 数据类型 字符串函数 常量

    在 PHP 中,有两种基本的输出方法:echo 和 print. 在本教程中,我们几乎在每个例子中都会用到 echo 和 print.因此,本节为您讲解更多关于这两条输出语句的知识. PHP echo ...

  7. WiFi-ESP8266入门http（2-1）文件系统-复杂结构的网页

    https://blog.csdn.net/solar_Lan/article/details/74231360 用到的网页文件:链接:https://pan.baidu.com/s/1vk6xmsY ...

  8. copy from insert using 语句迁移数据

    使用copy实现long类型转移表空间,表空间的数据文件损坏,在转移该表空间相关表时,遇到让人郁闷的long类型.不能使用ctas和move来实现转移,最后通过古老的copy来实现该项工作. 1.模拟 ...

  9. Java NIO3：缓冲区Buffer

    在上一篇中,我们介绍了NIO中的两个核心对象:缓冲区和通道,在谈到缓冲区时,我们说缓冲区对象本质上是一个数组,但它其实是一个特殊的数组,缓冲区对象内置了一些机制,能够跟踪和记录缓冲区的状态变化情况,如 ...

  10. echarts 图例显示到右边

    原: legend: { data:['同龄普通孩子','已具备技能','已泛化技能','已掌握技能','学习中'] }, 改: legend: { data:['同龄普通孩子','已具备技能','已 ...