css图片锯齿,CSS 锯齿实现

使用before和after伪元素的border实现左右和上下锯齿，

左右锯齿实现

.sawtooth {

/* 相对定位，方便让before和after伪元素绝对定位偏移 */

position: relative;

/* 把超出div的部分隐藏起来 */

overflow: hidden;

background:#FFFFFF;

width:16.75rem;

height:6rem;

}

.sawtooth:before, .sawtooth:after {

content: ' ';

width: 0;

height: 100%;

/* 绝对定位进行偏移 */

position: absolute;

top: 10px;

}

.sawtooth:before {

/* 圆点型的border */

border-right: 10px dotted white;

/* 偏移一个半径，让圆点的一半覆盖div */

left: -5px;

}

.sawtooth:after {

/* 圆点型的border */

border-left: 10px dotted white;

/* 偏移一个半径，让圆点的一半覆盖div */

right: -5px;

}

设置上下锯齿

.sawtooth {

/* 相对定位，方便让before和after伪元素绝对定位偏移 */

position: relative;

/* 把超出div的部分隐藏起来 */

overflow: hidden;

background:#FFFFFF;

width:16.75rem;

height:6rem;

}

.sawtooth:before, .sawtooth:after {

content: " ";

width: 100%;

height: 0px;

position: absolute;

}

.sawtooth:before {

/* 圆点型的border ，颜色要和父视图的背景颜色一致*/

border-top: 10px dotted #82D9FF;

/* 偏移一个半径，让圆点的一半覆盖div */

left: 10px;

top: -4px;

}

.sawtooth:after {

/* 圆点型的border */

border-bottom: 10px dotted #82D9FF;

/* 偏移一个半径，让圆点的一半覆盖div */

right: -10px;

bottom: -4px;

}

css图片锯齿,CSS 锯齿实现相关推荐

html图片怎么中心对齐,css图片居中(css怎么让图片水平居中对齐)
css图片居中 css图片居平分css图片水平居中和笔直居中两种状况,有时候还需要图片同时水平笔直居中,下面分几种居中状况别离介绍. css图片水平居中运用margin:0auto完成图片水平居中 ...
CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式. 又被解释为: CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图图片合成技术 CSS Spri ...
[css] css图片缩放失真出现锯齿的如何解决呢？
[css] css图片缩放失真出现锯齿的如何解决呢? 1.-ms-interpolation-mode,这是针对IE的解决方案.其值设置为bicubic. 2.image-rendering,这是提供 ...
[css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
css 图片自适应_104道 CSS 面试题，助你查漏补缺（下）
(给前端大全加星标,提升前端技能) 作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/ma ...
html图片缩放6,四款css 图片按比例缩放实例(兼容ie6,7,firefox)
使用max-width,max-height:或者min-width,min-height的css属性即可.如: 代码如下 img{max-width:100px;max-height:100px;} ...
【源码分享】用Java写的网页图片、CSS、JavaScript分类下载器
前段时间老师让我们要做一个JavaEE项目,是一个电子商务网站--中国鲜花网,前台模板就用这个网站的,但是用浏览器直接下载来的图片和样式表等文件全在一个文件夹,需要给它批量替换,最要命的是浏览器的这个 ...
CSS图片廊实例详解
效果: <!DOCTYPE html> <html> <head> <style> div.img {margin: 2px;border: 1px s ...
PHP图片间隙用什么代码,如何解决CSS图片下面有间隙的问题
这篇文章主要介绍了CSS图片下面有间隙的6种解决方案,需要的朋友可以参考下在进行页面的p+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对 ...
php图片左右滚动代码怎么写,css图片滚动代码怎么写？轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...

css图片锯齿,CSS 锯齿实现

css图片锯齿,CSS 锯齿实现相关推荐

最新文章

热门文章