通过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. Java线程池使用说明

    Java线程池使用说明 转自:http://blog.csdn.net/sd0902/article/details/8395677 一简介 线程的使用在java中占有极其重要的地位,在jdk1.4极 ...

  2. reds Virtual Memory

    Virtual Memory technical specification This document details the internals of the Redis Virtual Memo ...

  3. Makefile 一点一滴(三)—— 尝试简单的变量替换

    上一版的 makefile: TestCpp : ./debug/TestCpp.o g++ -o TestCpp ./debug/TestCpp.o ./debug/TestCpp.o : ./sr ...

  4. (翻译)Emacs Hooks

    Table of Contents 1. 51.2.2 Hooks 51.2.2 Hooks Hooks(钩子或挂钩,为了保持文章的纯正性,这种专有名词不做翻译,后续以hooks为主),是定制化Ema ...

  5. (转)Web性能优化方案

    第一章 打开网站慢现状分析 在公司访问部署在IDC机房的VIP网站时会感觉很慢.是什么原因造成的?为了缩短页面的响应时间,改进我们的用户体验,我们需要知道用户的时间花在等待什么东西上. 可以跟踪一下我 ...

  6. ajax 中boolean值技巧

    // 利用判断 数据重复 function checkId () { var flag = true; $.ajax({ url: "", type: "post&quo ...

  7. Intellij IDEA 初级学习文章

    Intellij IDEA同时打开多个项目 IntelliJ IDEA 14.x 创建工作空间与多个Java Web项目 使用IntelliJ IDEA 14和Maven创建java web项目

  8. query语句的拼接.

    在外网服务器上的网页,不能排序了,原因是query语句拼接时,sort没有能拼上,. 小小的思路: 1.是不是网页请求出了问题: 和我本机上的的请求一一对比,并没有发现什么问题. 2.代码除了问题吗: ...

  9. TableView遇到的问题

    1.所建立的TableView滑动不到底部的问题: tableView继承scrollerView,当tableview开始建立的时候,会先计算每个cell的高度和每个headerview的高度.fo ...

  10. 二叉树的实现与一些基本操作(C++环境)

    #include<cstdio>#include<cstdlib>#include<iostream>#include<cstring>using na ...