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. GDB调试GCC(jRate)

    1.前提是build GCC的时候要修改makefile,在configure之后生成的makefile忠,将CFLAGS和CFLAGS_FOR_BUILD改成-g3 -O0.. 2.在root用户下 ...

  2. 响应头location 页面跳转

    登陆:http://192.168.32.161/DEVOPS/index.php/Index/do_login Cache-Control no-store, no-cache, must-reva ...

  3. linux sar查看网络流量

    sar -n DEV 1 10 -n { keyword [,...] | ALL } Report network statistics. IFACE Name of the network int ...

  4. 【转】使用DateFormat把时间长度格式化为"时:分:秒"格式--不错

    原文网址:http://ssd910.blog.163.com/blog/static/238767972010112214114201/ 经常在系统中显示时间长度,基本上每次都是显示秒数,客户觉得按 ...

  5. http与https的区别以及https的加密原理

    HTTPS(Secure Hypertext Transfer Protocol)安全超文本传输协议 它是一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务器之间交换信息.它使用安全套接字层 ...

  6. programData

    以.结束语句输入;

  7. DL，DT，DD，比传统table更语义，解析更快的table列表方式

    使用dl,dt,dd替代传统的table布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  8. MySql 查询表字段数

    MySql 查询表字段数 SELECT COUNT(*) FROM information_schema.columns WHERE table_schema='test_cases' AND tab ...

  9. [置顶] 【VB.NET2010】注册表写入方法

    这里,以添加启动项为例: Imports Microsoft.Win32 Imports System.Reflection.Assembly   Private Sub SetAuto_Click( ...

  10. 关于target is null for setProperty的问题总结

    出现了这个问题,报错是 com.opensymphony.xwork2.ognl.OgnlValueStack WARN  - Error setting expression 'costRecord ...