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. Function 语意学

    C++支持三种类型的member functions: static.nonstatic和virtual,每一种类型调用方式都不相同. 一 nostatic members functions 1 调 ...

  2. 这样就算会了PHP么？-4

    数组初步 <?php $ereg = 'tm'; $str = 'hello,tm,Tm,tM,TM.'; $rep_str = eregi_replace($ereg, 'TM', $str) ...

  3. Bring it on

    I am going to open a whole new English Blog here. Most blogs here would be computer technologies, in ...

  4. Spring中给Bean注入集合

    Spring中如果一个Bean里含有集合元素,需要给Bean里的集合元素注入元素时,可以采用如下方法,一个是构造器注入,一个是setter注入 JavaBean源代码: import java.uti ...

  5. <php>删除（有内容的）文件夹函数程序

    function deldir($dirname) { if(!file_exists($dirname)) {//判断文件夹是否存在 die("文件夹不存在!");//作用等于( ...

  6. uva 111 History Grading(最长公共子序列）

    题目连接:111 - History Grading 题目大意:给出一个n 代表序列中元素的个数, 然后是一个答案, 接下来是若干个同学的答案(直到文件结束为止), 求出两个序列的最长公共子序列, 注 ...

  7. Android ActionBar详解(一)：ActionBar概述及其创建

    在Android 3.0中除了我们重点讲解的Fragment外,Action Bar也是一个重要的内容,Action Bar主要是用于代替传统的标题栏,对于Android平板设备来说屏幕更大它的标题使 ...

  8. 【Nginx】事件和连接

    不同的操作系统相应不同的事件驱动机制.在Linux 2.6之后使用epoll机制.相应的事件驱动模块是ngx_epoll_module.Nginx的ngx_event_core_module模块依据操 ...

  9. android 新浪微博客户端的表情功能的实现

    这是一篇好文章,我转来收藏,技术的最高境界是分享. 最近在搞android 新浪微博客户端,有一些心得分享弄android客户端表情功能可以用以下思路1.首页把新浪的表情下载到本地一文件夹种,表情图片 ...

  10. Android Notification使用及取消

    //发送通知 NotificationManager manger = (NotificationManager) this.getSystemService(NOTIFICATION_SERVICE ...