1.css替换简单图标的展示方法
.box1 span{width:0px;height:0px;font-size:;display:inline-block;position:absolute;left:11px;top:10px;border-right:6px solid transparent;border-top:50px solid #f00}

.box2 span{width:0px;height:0px;font-size:;display:inline-block;position:absolute;left:11px;top:100px;border-right:50px solid transparent;border-top:10px solid #ddd}

.box21 span{width:0px;height:0px;font-size:;display:inline-block;position:absolute;left:111px;top:100px;border-right:50px solid #ddd;border-bottom:50px solid transparent}

.box3 span{width:0px;height:0px;font-size:;display:inline-block;position:absolute;left:11px;top:200px;border:10px solid #000;border-color:transparent transparent transparent #f00}

.box4 span{width:0px;height:0px;font-size:;display:inline-block;position:absolute;left:11px;top:300px;border:10px solid #000;border-color:transparent transparent #f00 transparent}

.box5 span{width:0px;height:0px;font-size:;display:inline-block;position:absolute;left:11px;top:400px;border:10px solid #000;border-bottom:10px solid transparent}

.box6 span,

.box6 span i{width:0px;height:0px;font-size:;display:inline-block;position:absolute;left:11px;top:500px;border:8px solid #000;border-color:transparent transparent #000 transparent}

.box6 span i{left:-7px;top:-6px;border:7px solid #fff;border-color:transparent transparent #fff transparent}

.box7 span,

.box7 span i{width:0px;height:0px;font-size:;display:inline-block;position:absolute;left:11px;top:600px;border:50px solid #f00;border-color:transparent transparent transparent #f00}

.box7 span i{left:-50px;top:-30px;border:30px solid #fff;border-color:transparent transparent transparent #fff}

</style>

<body>

<div class="box1 box2 box3 box4 box5">

<span></span>

</div>

<div class="box6 box7">

<span><i></i></span>

</div>

2.css3 新方法的代码和效果
1）border-radius:
<div id="divone"></div>
#divone{

    width: 200px;

    height: 200px;

    border: 1px solid red;

    border-radius: 15px;

}

　　

 可以写为 :   -moz-border-radius
                  -webkit-border-radius:
 
#divone{

    width: 200px;

    height: 200px;

    border: 1px solid red;

    border-radius:0px 15px 25px 45px;

}
border-radius:1 2 3 4 分别代表的是左上角 右上角 右下角 左下角
2)box-shadow   只有chrome 和 safair 支持这个阴影的效果
#divone{

    width: 200px;

    height: 200px;

    border: 1px solid #000;

    background:#fff;

    box-shadow:13px -11px 10px #333;

}
box-shadow:1 2 3 4 分别代表的值是 阴影左边的距离， 阴影右边的距离 ，阴影清晰度 颜色
3)resize overflow
#divone{

    width: 100px;

    height: 100px;

    border: 1px solid #000;

    resize: both;

    overflow: auto;

}
右下角可以进行缩放
 
4）css 多栏布局
-webkit-column-count:4
-webkit-column-gap:20px;
column-count: 栏数  column-width:栏宽  column-gap:各栏之间的空白间隔 如果没有设定column-count：在允许宽范围内尽可能多的增加栏目
 
#divone{

     -webkit-column-count :;

     -webkit-column-gap : 20px;

     -moz-column-count :;

     -moz-column-gap : 20px;

     column-rule: 1px solid #00000;

 }
 
5) word-wrap:属性是用来防止太长的字符串溢出，可以用两个属性值 normal 和 break-word
normal 是默认的只允许在断电截断文字，break-word 文字可以在任何需要的地方截断匹配分配的空间并防止溢出
 
6)媒体查询
@media all and(max-width:480px){

    #divdone{width:400px;height：400px;backgroundL:red}

}

css 完美替换图片的更多相关文章

  1. 记录利用CSS完美解决前端图片变形问题

    在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一.让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中: <style type="text/ ...

  2. Microsoft.AspNet.Web.Optimization.Bundle的完美替换方案

    Web应用程序中包含大量的样式(css)和脚本(js)文件,这些文件的引用.管理和发布有很多解决方案.在Asp.Net MVC应用程序中,大家最熟悉的解决方案应属Microsoft.AspNet.We ...

  3. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  4. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  5. webpack模块加载css文件及图片地址

    webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...

  6. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  7. 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

    最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...

  8. 分享11个纯css完成的图片浏览器

    图片画廊用于在网站上显示系列图片,它已成为网站重要的组成部分.实现图片画廊有很多种方法,今天要与大家分享的是11个使用纯 CSS 实现的图片画廊,它们代码少,效果炫,加载速度快,希望能对大家有所帮助. ...

  9. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

随机推荐

  1. Nexus Root Toolkit教程——刷机

    Nexus Root Toolkit是Nexus系列设备专属解锁.root.刷机.修复工具.本教程以Nexus7二代刷安卓5.0 Lollipop系统为实例演示刷机过程. 标签: 安卓5.0刷机教程 ...

  2. SPOJ220 Relevant Phrases of Annihilation

    http://www.spoj.com/problems/PHRASES/ 题意:给n个串,求n个串里面都有2个不重叠的最长的字串长度. 思路:二分答案,然后就可以嘿嘿嘿 PS:辣鸡题目毁我青春,一开 ...

  3. Qt 的信号与槽机制介绍（10个要注意的问题）

    QT 是一个跨平台的 C++ GUI 应用构架,它提供了丰富的窗口部件集,具有面向对象.易于扩展.真正的组件编程等特点,更为引人注目的是目前 Linux 上最为流行的 KDE 桌面环境就是建立在 QT ...

  4. hdu4405：概率dp

    题意: 总共有n+1个格子:0-n 初始情况下在 0号格子 每次通过掷骰子确定前进的格子数 此外 还有一些传送门可以瞬间从 u 点传送到 v 点(必须被传送) 求走到(或超过)n点总共需要掷多少次骰子 ...

  5. phpcms:六、频道页（category.html）

    1.当前栏目的ID:{$catid}标题样式:{title_style($v[style])}(在添加内容或编辑内容的时候,标题右边 有一个选择颜色的块).{str_cut(strip_tags($v ...

  6. 传智播客学习之HTML基础语法

    一.基本格式 1.不用区分大小写. 2.HTML代码由<html>开始</html>结束.里面由头部分<head></head>和体部分<body ...

  7. Annotation(四)——Struts2注解开发

    Hibernate和Spring框架的开发前边总结了,这次看一下流行的MVC流程框架Struts2的注解开发吧.Struts2主要解决了从JSP到Action上的流程管理,如何进行Uri和action ...

  8. Operation System - Peterson&#39;s Solution算法 解决多线程冲突

    Person's solution 是用来一种基于软件的解决关键区域问题的算法(critical-section). 它并不是完美的,有可能不对地工作.并且是限制解决两个进程同步的问题. 可是它非常e ...

  9. .NET--接口设计

    我们学习.net视频的时候,老师讲的是"介面设计",有意思的是,这里的介面不是我们想象中的界面的意思,而是接口的意思. 由于视频是Micorsoft公司做的,所以整个视频看下来.仅 ...

  10. 住javaWeb分页实现（模拟百度首页）

    本文来源于 http://blog.csdn.net/tjpu_lin/article/details/41050475 近期在开发一个项目,项目中有非常多数据展示的模块.所以要用到分页,网上搜了非常 ...