css3实现border渐变色

心血来潮 什么都不说 上代码

.gradualChange{
width: 300px;
height: 300px;
border:20px solid;
//兼容
border-image: -webkit-linear-gradient(#000,#333,#000) 30 30;
border-image: -moz-linear-gradient(#000,#333,#000) 30 30;
border-image: linear-gradient(#000,#333,#000) 30 30;
}

原文地址:http://blog.51cto.com/10155134/2176604

时间: 2024-11-04 19:06:15

css3实现border渐变色的相关文章

css3学习--border

http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px,左右是20px border-radius:50px 0px 30px; 上50px 左右0px 下30px; 圆和椭圆的区别在于,椭圆的长短半轴不相等 border-radius还可以用斜杠设置第二组值.这时,第一组值表示水平半径,第二组值表示垂直半径.第二组值也可以同时设置1到4个值,应用规则

css3动画使用技巧之—border旋转时的应用。

<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF-8"/> <style type="text/css"> body{ background: #ccc; } .he{ width: 100px; height: 100px; margin: 200px auto; border: 10px solid bla

CSS3 Border-color——W3CPlus http://www.w3cplus.com/content/css3-border-color

CSS3中有关于Border的属性一共有三个:圆角border-radius,图片边框border-image,边框多颜色border-color,其中圆角border-radius是常用的一个属性,而且现在很多网站制作圆角效果都使用border-radius来实现,具体的使用方法可以查阅本站有关于border-radius的介绍.今天我们主要来学习border-color的使用. border-color这个属性我想大家一定不会陌生,因为我们平时常能看到并使用这个属性.那么在CSS3中这个属性

初探CSS3 - 边框

早在CSS1中就已经定义了 border 属性,使用它可以设置元素的边框风格,包括边框样式,粗细和颜色,使用以下三个值来设置: border-width //粗细 border-color //颜色 border-style //样式 在实际的使用中我们常常将这三条属性合在一起来书写,如下所示: border:1px solid #000; CSS3对border属性进行了增强,主要是在以下几个属性上: border-color border-radius border-image box-sh

css3之图形绘制

由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(border-width.border-style.border-color)三个属性. ? border-top(上边框):border-width bo

CSS3—— border-radius

border-radius(边框的半径) 平时我们在css2中用到border也就是设置成一个圆,或者四个角的圆润粗细,今天我们就来看看在css3的border. border中4个角的对应是: 设置一个值跟设置四个同样的值是一样的 圆角 原文地址:https://www.cnblogs.com/yangpeixian/p/11191583.html

JavaScript总结之鼠标划过弹出div单击出现对话框

为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认或取消.其实部分想要的功能可以从中截取. js代码: 1 <script type="text/javascript"> 2 function sAlert_jobdel(str){ 3 var msgw,msgh,bordercolor; 4 msgw=400;//提示窗口的

总结html

1.初识html W3C : 万维网联盟!(World Wide Web Consortium )   创建于1994年,是web技术领域最权威最具有影响力的标准机构!           W3C规定了web技术领域相关技术的标准!       官网地址:   www.w3c.org   www.chinaw3c.org       XML :负责数据的存储   Html :结构化标准,负责数据的显示   CSS :表现标准   JavaScript:行为标准           Html概念:

你务必知道的css简写

简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性.使用简写属性,Web 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起.比如 CSS 的 background 属性就是一个简写属性,它可以定义 background-color.background-image.background-repeat 和 background-position 的值.类似地,最常见的字体相关的属性可以使用