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中很少使用到,所以我们有必要来了解 ...
随机推荐
- oc--UINavigationController控制器
UINavigationController导航控制器 UINavigationController导航控制器,是多个界面间跳转的重要元素,可以理解为它存储着多个viewController,它的存储 ...
- ubuntu 使用中的一些问题汇总
1.IOError: [Errno 13] Permission denied /usr/local…… 这个错误是在terminal中运行pip install 时产生的,说的时没有权限运行安装包, ...
- 在 ASP.NET 中创建数据访问和业务逻辑层(转)
.NET Framework 4 当在 ASP.NET 中处理数据时,可从使用通用软件模式中受益.其中一种模式是将数据访问代码与控制数据访问或提供其他业务规则的业务逻辑代码分开.在此模式中,这两个层均 ...
- 入门struts2.0
框架是什么? 1.应用程序的半成品. 2.可重用行公共的结构. 3.按一定规则组织的一组组件. model2 其实并不是一种全新的概念,很对人指出model2其实正好是经典的"模型(mode ...
- Html标签第三课
1.css div { position:absolute; } #d1 { height:100px; width:100px; border: solid 1px red; background- ...
- http://tool.oschina.net 在线API文档库java jquery ,php,很全的文档库
http://tool.oschina.net 1.6API文档(中文)的下载地址: ZIP格式:http://download.java.net/jdk/jdk-api-localizations ...
- ibatis入门教程
转载自 http://www.cnblogs.com/ycxyyzw/archive/2012/10/13/2722567.html iBatis 简介: iBatis 是apache 的一个开源项 ...
- 有关C# struct的一个误区
参考:http://blog.csdn.net/onlyou930/article/details/5568319 下面写一个新的例子: using System; using System.Coll ...
- win7下KiWi Syslog服务器的安装与配置
今天就来聊聊日志服务器KiWi Syslog的安装与配置. 首先,所需文件有以下2个: 1.Kiwi_Syslog_Server_9.5.0.Eval.setup.exe[此版本只有14天寿命][Ki ...
- 计算机●编程语言●JAVA
<Java编程思想(第4版)> 2016-04-27 12:38 ☆ 对JAVA知识面比较全的介绍.但也只是介绍,没有进入主题好好分析透彻.所以适合有几年工作经验的java码农(虽然 ...