CSS3实现边框锯齿效果

通过CSS3的linear-gradient实现的

<div class="bg"></div>

.bg{

width:300px;

height:50px;

background:#caca8c;

background-image:-webkit-gradient(linear,50% 0,0 100%,

from(transparent),

color-stop(.5,transparent),

color-stop(.5,#d86707),

to(#d86707)

),

-webkit-gradient(linear,50% 0,100% 100%,

from(transparent),

color-stop(.5,transparent),

color-stop(.5,#d86707),

to(#d86707)

);

background-image:-moz-linear-gradient(50% 0 -45deg,

transparent,

transparent 50%,

#d86707 50%,

#d86707

),-moz-linear-gradient(50% 0 -135deg,

transparent,

transparent 50%,

#d86707 50%,

#d86707

);

background-size:30px 15px;

background-repeat:repeat-x;

background-position:0 100%;

}

时间: 2024-11-06 11:34:04

CSS3实现边框锯齿效果的相关文章

第 23 章 CSS3 边框图片效果

学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样,边框就可以自定义了. 1.border-image-source      //引入背景图片地址2.border-image-slice         //切割引入背景图片3.border-image-width       //边框

CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现

前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class="blur"/> <div class="text-gradient ">天赐神功</div> <div class="border"></div> </div> 上面一看第一个图片i

第八十节,CSS3边框图片效果

CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样,边框就可以自定义了.     1.border-image-source                      //引入背景图片地址     2.border-image-slice                        

CSS3动画结合伪元素实现边框滚动效果

今天和大家分享一个利用CSS3的animation属性完成的一个边框动画效果.大家都知道,CSS3给我们提供了@keyframes关键字,能让我们在网页中轻松插入动画.一个简单的动画插入,结构如下: 1 <style> 2 .wrap{ 3 position: absolute; 4 left: 200px; 5 width: 200px; 6 height: 200px; 7 animation: run 2s linear infinite; /*动画名 时间 速度 动画次数*/ 8 ba

第23章 CSS边框图片效果

本章学习日后开发使用参考一下内容 https://www.qianduan.net/css3border-image-bian-kuang-tu-xiang-xiang-jie/ 或W3C 或者百度 未排版的PDF转WORD(不想排版了) 第 23章 CSS3边框图片效果学习要点:1.属性初探2.属性解释3.简写和版本 本章主要探讨 HTML5中 CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩.一.属性解释CSS3提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样

ss3来实现边框圆角效果

经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然border-radius要在firefox或Safari 和 Chrome才能实现 W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性:border-radius,Firefox 和 Safari 也通过私有属性实现了该功能: 1 <div style=" border-top-left-ra

6种炫酷的CSS3按钮边框动画特效

这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览   源码下载 使用方法 HTML结构 该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作.各种效果非标设置不同的class.例如第一种效果的class为draw. <button class="draw">draw</button> CSS样式 在CSS样式

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

CSS3 border-radius边框圆角

CSS3 border-radius边框圆角http://www.cnblogs.com/polk6/p/6050818.html 在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了5种圆角属性: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :