css3实现border渐变色

话不多说，直接上代码：

  .box{width: 100px;
     height: 100px;
     border:10px solid #ddd;
     border-image: -webkit-linear-gradient(#ddd,#000) 30 30;
     border-image: -moz-linear-gradient(#ddd,#000) 30 30;
     border-image: linear-gradient(#ddd,#000) 30 30;
}

结果如图：

css3实现border渐变色相关推荐

CSS3之border属性
border相关属性需要大量练习,方可运用自如! 文字下方有Demo!!! border: 作用: 设置在一个声明中包含所有的边框属性说明: 可以设置 ...
css3 实现背景渐变色与背景图片并存效果
css3 实现背景渐变色与背景图片并存效果先看效果背景是渐变色+浅色透明图案组成,UI没有完全切成一张图,刚好试试看能不能使用背景渐变+图片的效果. 对兼容性要求高的不要这样做,直接叫UI切合成 ...
CSS3之border
本来是想把border和background写一块的,结果写着写着发现background内容太多,先发border吧目录 1.border-radius (1)不做拆分 (2)拆分 (3)大合并 ...
CSS3有趣的渐变色
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士这里给大家分享几个有趣的渐变色,用来丰富页面. 一.背景色渐变经常用的就是给背景色增加渐变效果,这里的语法顺序不要错(牵扯到优雅降级和 ...
css3中的渐变色效果
开发工具与关键技术:dw,html+css3 作者:邓伟征撰写时间:2019年1月18日渐变的含义:两种或多种颜色之间平滑过渡的效果渐变的属性和取值属性background-image 取值: ...
CSS3 实现文字渐变色
直接上代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
css3实现字体渐变色
<text class="value">渐变字体</text> 第一种: .value{font-size: 90rpx;font-weight: bold ...
html 直线变曲线,CSS3怎么画曲线？
CSS3怎么画曲线?下面本篇文章给大家介绍一下CSS3画曲线的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS3怎么画曲线? 大家都知道,CSS3中border已经可以实 ...
css3中边框的4种样式
border是CSS的一个属性,用它可以给能确定范围的HTML标签画边框,它可以定义边框线的类型.宽度和颜色,最终可以制作一些特殊效果 css3的边框有4种样式: 1.border-color(边框的 ...

css3实现border渐变色

css3实现border渐变色相关推荐

最新文章

热门文章