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. Codeforces 455B A Lot of Games

    http://codeforces.com/contest/455/problem/B 题目大意: 给出n个字符串,进行k次游戏,每次游戏输家下次作为先手,游戏规则为每次放一个字母,导致当前构造的字符 ...

  2. leetcode_Search in Rotated Sorted Array II

    Follow up for "Search in Rotated Sorted Array": What if duplicates are allowed? Would this ...

  3. 减少leftJoin的使用 (转)

    作为开发,你是否经常碰到下面需要转换用户ID成用户名称的情况: 可惜你的这些业务表出于最少冗余设计要求,只有UserId,而没有UserName,这时你不得不破坏你一个类封装一个表的美好想法, 在你的 ...

  4. bzoj1148

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1148 很常见的排序贪心题...... 假设我们得到了一个最优序列,记s[n]=w[1]+w[2 ...

  5. MSSQL的编译和执行过程

    原文地址:http://www.cncms.com.cn/mssql/3350_11.htm

  6. 关于matlab中textread

    本文主要内容引自http://linux.chinaitlab.com/administer/872894.html 笔者在此基础上进行运行,修改得到以下内容,希望大家给与补充: textread 基 ...

  7. poj 3666 Making the Grade(dp)

    Description A straight dirt road connects two fields on FJ's farm, but it changes elevation more tha ...

  8. html5 手机APP计算高度问题

    安卓手机型号比较多,会出现bottom:0 找不到底部的问题,所以需要计算手机可视区域高度,这样便于使用百分比适配 (function(window,undefined){ /** * js_heig ...

  9. Web Service-- 使用 JDK 发布 WS

    Web Service,即“Web 服务”,简写为 WS,从字面上理解,它其实就是“基于 Web 的服务”.而服务却是双方的,有服务需求方,就有服务提供方.服务提供方对外发布服务,服务需求方调用服务提 ...

  10. BootStrap学习之先导篇——响应式网页

    Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...