通过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%;

}

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

  1. css3实现左右锯齿效果

    要实现的效果:css3实现左右锯齿效果 <!DOCTYPE html> <html> <head> <meta charset=" utf-8&qu ...

  2. 第 23 章 CSS3 边框图片效果

    学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 提 ...

  3. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  4. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

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

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3 ...

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

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  7. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

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

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  9. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

随机推荐

  1. Mac上部署JDK/Ant/Jmeter/Jenkins

    一.安装JDK 1. 下载JDK 2. 下完后直接双击安装,默认安装到/Library/Java/JavaVirtualMachine下 3. 验证是否安装成功 java -version 二.安装J ...

  2. Anagrams

    这题Leetcode上面的描述不清楚.怎么也得举两个例子吧,不然谁懂? 题目的意思是,给定一些字符串,比如["abc","cba","bac" ...

  3. git 小结

    git cherry-pick de0ec64  可将另一个分支中的提交 cherry-pick到当前分支来

  4. S5PV210之GPIO模拟I2c时序之pcf8591与at24xx linux3.0.8驱动

    目录:一. 说明 二. 驱动程序说明及问题 三. 案例一       四. 案例二 一. 说明 mini210开发板上带了at24c08, 看了linux内核自带的at24.c的驱动程序,编译下载到看 ...

  5. Socket异步存储示例

    异步客户端存储示例: using System; using System.Net; using System.Net.Sockets; using System.Threading; using S ...

  6. $.getJSON('url',function(data){}) 中回调函数不执行

    $.getJSON('url',function(data){}) 中回调函数不执行 url 中的 json 格式不正确 ,浏览器返回并没有报错 {'湖北':[114.11438,30.849429] ...

  7. 利用calc计算宽度

    width:calc(100% - 40px)可用 + - * / 进行计算(ie9+) 注:计算符号前后必须跟上空格.

  8. QM UML状态机建模实例之移植 cortex-m0

    ---恢复内容开始--- 在上一期“Blinky for cortex-m0”中我们介绍了如何在QM中建立一个工程和生成代码,如何使生成的代码在我们的工程师运行起来,为此这一期要介绍如何将QP-NAN ...

  9. String类常用方法小节

    (1)String.equals() 返回值是boolean类型 equals(Object anObject)           将此字符串与指定的对象比较. (2)length() 返回值是in ...

  10. 使用java发送邮件

    首先要加入mail.jar包 import java.io.UnsupportedEncodingException; import java.util.Properties; import java ...