<!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. （转）Spring Boot 2 (五)：Docker Compose + Spring Boot + Nginx + Mysql 实践

    http://www.ityouknow.com/springboot/2018/03/28/dockercompose-springboot-mysql-nginx.html 我知道大家这段时间看了 ...

  2. P3399 丝绸之路 dp

    题目背景 张骞于公元前138年曾历尽艰险出使过西域.加强了汉朝与西域各国的友好往来.从那以后,一队队骆驼商队在这漫长的商贸大道上行进,他们越过崇山峻岭,将中国的先进技术带向中亚.西亚和欧洲,将那里的香 ...

  3. centos7下安装docker（15.5容器跨主机网络--flanneld）

    flannel是由CoreOS研究的一种覆盖网络(overlay network)网络工具,目的是帮助每一个host主机有一个完整的子网: 功能是:让集群中不同节点的主机创建的容器都有一个唯一的虚拟I ...

  4. Hive窗口函数

    参考地址:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+WindowingAndAnalytics 环境准备: CRE ...

  5. [LeetCode]最大系列(最大正方形221,最大加号标志764)

    221. 最大正方形 题目描述: 在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 ...

  6. Consul在.Net Core中初体验

    Consul在.Net Core中初体验 简介 在阅读本文前我想您应该对微服务架构有一个基本的或者模糊的了解 Consul是一个服务管理软件,它其实有很多组件,包括服务发现配置共享键值对存储等 本文主 ...

  7. 深度学习框架PyTorch一书的学习-第五章-常用工具模块

    https://github.com/chenyuntc/pytorch-book/blob/v1.0/chapter5-常用工具/chapter5.ipynb 希望大家直接到上面的网址去查看代码,下 ...

  8. 破解windows版idea

    近期使用idea的时候提示已过试用期,需要购买,否则只能使用半小时 网上破解方法很全,记录一下 1.下载破解补丁 百度网盘:https://pan.baidu.com/s/15Wq9-c4SVwg_2 ...

  9. shell删除三天前或者三天内的文件

    说明:+n 大于 n, -n 小于 n, n 相等于 n. find / -amin -30 -ls # 查找在系统中最后30分钟访问的文件find / -atime -2 -ls # 查找在系统中最 ...

  10. IIS6下使用多域名和通配符证书

    由于SSL协议,在完成握手以前,都只能采用IP地址通信方式,没有办法获取访问地址中的域名信息,所以针对每个IP地址的每个端口,服务器只能返回相同的一张证书.如果要实现多个不同域名共享一个IP地址的缺省 ...