outline,box-shadow,border-radius小例子
<!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小例子的更多相关文章
- 前端的CRUD增删改查的小例子
前端的CRUD增删改查的小例子 1.效果演示 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> & ...
- 【zTree】 zTree使用的 小例子
使用zTree树不是第一次了 但是 还是翻阅着之前做的 对照着 使用起来比较方便 这里就把小例子列出来 总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先 在 ...
- js小例子(标签页)
运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...
- text-align:justify小例子
一个使用 text-align: justify; 使元素均匀分布的小例子: <!DOCTYPE html> <html lang="en"> <he ...
- JS的for循环小例子
1.输出1-100的和 var sum = 0; for(var i=1;i<=100;i++){ sum = sum + i; } document.write(sum); 2.输出1-100 ...
- css display table使用小例子实验
display的下面: table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row 此元素会作为一个表格行显示(类似 <tr>) ...
- 前端小例子 基础js css html练习
前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...
- appium webdriver 基本操作及小例子等
#encoding=utf-8 ''' ''' #driver新建 driver=webdriver.Remote('http://localhost:4723/wd/hub',caps) #关闭dr ...
- springmvc入门的第一个小例子
今天我们探讨一下springmvc,由于是初学,所以简单的了解一下 springmvc的流程,后续会持续更新... 由一个小例子来简单的了解一下 springmvc springmvc是spring框 ...
随机推荐
- JZOJ 5602.【NOI2018模拟3.26】Cti
JZOJ 5602.[NOI2018模拟3.26]Cti Description 有一个 \(n×m\) 的地图,地图上的每一个位置可以是空地,炮塔或是敌人.你需要操纵炮塔消灭敌人. 对于每个炮塔都有 ...
- python 逻辑判断 循环练习题
# 1.判断下列列逻辑语句句的True,False.# 1)1 > 1 or 3 < 4 or 4 > 5 and 2 > 1 and 9 > 8 or 7 < 6 ...
- WPF调用zxing生成二维码
1.登录http://zxingnet.codeplex.com/,下载对应.net版本的zxing库 2.引入zxing.dll 3.新建界面控件 using System; using Syste ...
- SQLite中的WAL机制详细介绍-与回滚日志原理
一.什么是WAL? WAL的全称是Write Ahead Logging,它是很多数据库中用于实现原子事务的一种机制,SQLite在3.7.0版本引入了该特性. 二.WAL如何工作? 在引入WAL机制 ...
- 转://工作中 Oracle 常用数据字典集锦
DBA工作中数据字典就等同于我们本和笔,时时刻刻也分不开的,不管是看状态,还是监控,都需要数据字典的支持,本文整理出来常用的数据字典系列,帮助大家来记住和汇总以便查询利用 ALL_CATALOG Al ...
- range()函数
range()函数 函数说明: range(start, stop[, step]) -> range object,根据start与stop指定的范围以及step设定的步长,生成一个序列.参数 ...
- mysql 数据库磁盘占用量统计
查看某个表的磁盘占用量 select (data_length+index_length)/1024/1024 M from information_schema.tables where table ...
- 移走mysql data目录,及常见mysql启动问题
一般mysql安装在/usr/local/下,现以将/usr/local/mysql/data目录移动到/home/mysql下为例 首先保证/home/mysql目录是存在的,本例中使用了mysql ...
- 用return关键字实现求和操作
package com.Summer_0419.cn; /** * @author Summer * 用return关键字的知识,实现求和操作 */ public class Test_Method0 ...
- VC++6.0 add files to project 造成Visual Studio崩溃的解决方法
1.下载filetool.exe,然后将文件解压在一个小文件夹内2.打开filetool.dsw 在release模式下编译程序,复制filetool.dll3.放在VC6.0安装目录AddIns的下 ...