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. Swift中数组集合-b

    数组(Array)是一串有序的由相同类型元素构成的集合.数组中的集合元素是有序的,可以重复出现. 声明一个Array类型的时候可以使用下面的语句之一. var studentList1:Array&l ...

  2. FJ省队集训DAY1 T1

    题意:有一堆兔子,还有一个r为半径的圆,要求找到最大集合满足这个集合里的兔子两两连边的直线不经过圆. 思路:发现如果有两个点之间连边不经过圆,那么他们到圆的切线会构成一段区间,那么这两个点的区间一定会 ...

  3. POJ 1225 Substrings

    http://poj.org/problem?id=1226 题意:给定n个串.求一个最长的串,使得这个串或者其反串在每个串中都出现过? 思路:先在大串里面加入正反串,然后二分,判定即可. #incl ...

  4. 用友U8.70安装说明

    用友U8.70安装说明 U8.70安装说明一.安装前注意事项:1.       在安装U870之前,我们推荐您确保当前计算机操作系统是“干净”的,即计算机在安装过操作系统和更新过必要的系统补丁后没有安 ...

  5. C#实现目录复制

     摘自:http://www.cnblogs.com/zxjay/archive/2008/10/29/1322517.html FCL提供了文件移动.文件复制.目录移动的方法,但没提供目录复制的 ...

  6. 利用Visual Studio寻找C#程序必要的运行库文件

    在工程打包中,有时候很头痛的就是运行所需要的库文件不能够全面的包含进来,特别是有时候调用了一系列外部扩展.对于这些问题,我们可以借用Visual Studio的打包功能帮助我们寻找软件运行必须的库文件 ...

  7. Address Book(地址薄)

    <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.Scene?> ...

  8. UIView添加支持代码块的手势

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(a ...

  9. Linux一个简单的读写文件

    (1)linux中的文件描述符fd的合法范围是或者一个正正数,不可能是一个负数. (2)open返回的fd程序必须记录好,以后向这个文件的所有操作都要靠这个fd去对应这个文件,最后关闭文件时也需要fd ...

  10. PHP设计模式笔记九：装饰器模式 -- Rango韩老师 http://www.imooc.com/learn/236

    装饰器模式(Decorator) 概述 1.装饰器模式可以动态地添加修改类的功能 2.一个类提供了一项功能,如果要在修改并添加额外的功能,传统的编程模式,需要写一个子类继承它,并重新实现类的方法 3. ...