css3的一些盒模型属性和分栏布局，响应式布局 - toodeep

公告

本人一切博客，仅当笔记所用，无任何高深见解，勿喷！

css3 倒影

box-reflect 倒影

参数依次为 direction 方向 above|below|left|right; 距离渐变（可选）看代码吧

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ background:#000;}
img{display:block;margin:200px auto;-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);}
</style>
</head>
<body>
<img src="miaov.jpg" />
</body>
</html>

可以很轻松模拟镜子的效果

resize 自由缩放 Both 水平垂直都可以缩放 Horizontal 只有水平方向可以缩放 Vertical 只有垂直方向可以缩放

注意：一定要配合overflow:auto 一块使用，目前好像只有webkit内核支持

看看css3的分栏布局吧

column-width 栏目宽度 column-count 栏目列数 column-gap 栏目距离 column-rule 栏目间隔线看代码吧

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.wrap{width:900px;border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -webkit-column-width:250px;}
</style>
</head>
<body>
<div class="wrap">
    <p>人生如戏，全靠演技。人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技</p>
    <p>人生如戏，全靠演技。人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技</p>
    <p>人生如戏，全靠演技。人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技</p>
    <p>人生如戏，全靠演技。人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技</p>
    <p>人生如戏，全靠演技。人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技人生如戏，全靠演技</p>
</div>
</body>
</html>

这样可以很轻松的在一个盒子里做出分栏显示段落的样子

css3响应式布局，也就是根据通过媒体查询，为不同的分辨率引用不同的样式，这里列举一下引入的方式吧。

1.@media all and (max-width:800px){.........}

2.<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>

3.import url("abc.css") all and (max-width:800px) { ......}

posted on 2015-05-31 22:49 toodeep 阅读(920) 评论(0) 收藏举报

刷新页面返回顶部