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%;
}
CSS3实现边框锯齿效果的更多相关文章
- css3实现左右锯齿效果
要实现的效果:css3实现左右锯齿效果 <!DOCTYPE html> <html> <head> <meta charset=" utf-8&qu ...
- 第 23 章 CSS3 边框图片效果
学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 提 ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- 第八十节,CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 ...
- CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现
前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...
- CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- Javascript 及 CSS3 实现进度条效果
Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...
随机推荐
- Java线程池使用说明
Java线程池使用说明 转自:http://blog.csdn.net/sd0902/article/details/8395677 一简介 线程的使用在java中占有极其重要的地位,在jdk1.4极 ...
- reds Virtual Memory
Virtual Memory technical specification This document details the internals of the Redis Virtual Memo ...
- Makefile 一点一滴(三)—— 尝试简单的变量替换
上一版的 makefile: TestCpp : ./debug/TestCpp.o g++ -o TestCpp ./debug/TestCpp.o ./debug/TestCpp.o : ./sr ...
- (翻译)Emacs Hooks
Table of Contents 1. 51.2.2 Hooks 51.2.2 Hooks Hooks(钩子或挂钩,为了保持文章的纯正性,这种专有名词不做翻译,后续以hooks为主),是定制化Ema ...
- (转)Web性能优化方案
第一章 打开网站慢现状分析 在公司访问部署在IDC机房的VIP网站时会感觉很慢.是什么原因造成的?为了缩短页面的响应时间,改进我们的用户体验,我们需要知道用户的时间花在等待什么东西上. 可以跟踪一下我 ...
- ajax 中boolean值技巧
// 利用判断 数据重复 function checkId () { var flag = true; $.ajax({ url: "", type: "post&quo ...
- Intellij IDEA 初级学习文章
Intellij IDEA同时打开多个项目 IntelliJ IDEA 14.x 创建工作空间与多个Java Web项目 使用IntelliJ IDEA 14和Maven创建java web项目
- query语句的拼接.
在外网服务器上的网页,不能排序了,原因是query语句拼接时,sort没有能拼上,. 小小的思路: 1.是不是网页请求出了问题: 和我本机上的的请求一一对比,并没有发现什么问题. 2.代码除了问题吗: ...
- TableView遇到的问题
1.所建立的TableView滑动不到底部的问题: tableView继承scrollerView,当tableview开始建立的时候,会先计算每个cell的高度和每个headerview的高度.fo ...
- 二叉树的实现与一些基本操作(C++环境)
#include<cstdio>#include<cstdlib>#include<iostream>#include<cstring>using na ...