css3.0抢先看(二)：border-color边框颜色的新用法，绝对酷

最新推荐文章于 2023-08-25 17:30:44 发布
最新推荐文章于 2023-08-25 17:30:44 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： css3.0 文章标签： css firefox border 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haozit146/article/details/2086075
版权
css3.0里的border-color选项又有了新功能，它能输出渐变的边框。在firefox中支持该效果，看下面边框的效果：
:
如果你现在用的是Firefox 的浏览器，那就能看到这个边框的渐变效果

它实现的代码是: 

 
 

  
  

   
   
   
   border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
他的原理是边框设定了边框的宽度后，可以由外道内一个像素一个像素的设置颜色，相当于有很多一个像素的边框组成一个大边框。
haozit146
关注
专栏目录
CSS3教程(3):border-color网页边框色彩
09-27
网页制作Webjx文章简介：现在我们来看一看如何为边框的border-color添加更多的色彩。 现在我们来看一看如何为边框的border-color添加更多的色彩...上一篇介绍了：CSS3教程(2):网页边框半径和网页圆角使用CSS3的border-r
border 颜色渐变
weixin_48702807的博客
05-30 5036
虚线渐变 <style> .box { border-bottom: 2px dashed #fff; border-right: 2px dashed #fff; background: linear-gradient(to right, rgb(0, 255, 127),rgba(26, 115, 232, 0.953)); background-origin: border-box; } .content { background-color: #ff
如何在dw给段落设置背景颜色_css3如何设置边框颜色渐变？css3边框颜色渐变的两种实现方法...
weixin_39937524的博客
11-29 1160
很多时候在开发网页的时候，可能因为一些原因需要为边框设置颜色渐变，那么该如何设置颜色边框渐变？本篇文章将为大家介绍使用css3设置边框颜色渐变的方法。程序猿的生活：web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线）​zhuanlan.zhihu.com我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色渐变，那么两个属性如...
不要图片？CSS实现圆角边框渐变色+背景透明
苏苏就是小苏苏的博客
06-04 1万+
👏不要图片？CSS实现圆角边框渐变色+背景透明，最近在工作中常常实现这些效果，速速来Get吧~🥇文末分享源代码。苏苏的bug。
css 设置border边框颜色渐变效果
m0_67401270的博客
08-01 3万+
上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性（拉伸或平铺），而中间的那个格子则水平重复和垂直方向的重复都要执行。下图是起始点到10%的位置标蓝色，10%到30%蓝到白的渐变，30%到70%为白到橘的渐变，从70%到结束标记橘色。从上到下，从起始开始，透明向蓝色渐变到20%的位置，然后又向透明进行渐变到99%的位置，99%到结束是透明。创建线性渐变，需要设置一个起始点和方向（或角度），还要定义终止色，以及两者之间的可选色（可以有多个）。随着渐变的重复，颜色再次循环。...
html边框渐变颜色代码,css中如何实现border边框颜色渐变代码详解
weixin_34118050的博客
06-05 791
在css中，如果一条边框线有n像素的宽度，那么就可以对其设置n种不同的颜色。在代码中，我们可以定义一条宽为7px的实线：border: 7px solid #C8C8C8;(不要在意此处设置的颜色，在firefox中后面的代码中会被新设置的颜色覆盖掉)如果对border中四边的边框同时设置渐变的颜色，如下述代码所示：p{height: 100px;width: 100px;border: 7px ...
CSS3之边框多颜色Border-color属性使用示例
09-25
CSS3的Border-color属性是专门用来实现边框多颜色效果的属性。它允许我们为一个元素的边框指定多个颜色，从而创造出不同于传统单色边框的视觉效果。这一特性在网页设计中尤其有用，可以用来增强网页元素的视觉吸引力...
tailwindcss-border-gradients:Tailwind CSS插件生成边框图像渐变实用程序
05-12
安装npm install tailwindcss-border-gradients使用简单{ theme : { colors : { 'red' : '#f00' , 'blue' : '#00f' , } , linearBorderGradients : theme => ( { colors : theme ( 'colors' ) , } ) , } , plugins :...
CSS border-color 属性使用方法
11-30
取值:[ <color> | transparent ]{1,4} | inherit <color>{1,4}: 颜色表示法 transparent{1,4}: 透明 inherit: 继承 初始值: 同color属性的默认值 继承性: 否 适用于: 所有元素 border:边框,color:颜色. border-color...
CSS实现渐变色边框，动画效果
最新发布
qq_38274119的博客
08-25 9833
以上是CSS实现渐变色边框的5种方法，可以根据需要选择和应用不同的方法。
canvas 文字颜色_给图形绘制阴影 --Canvas的基本操作
weixin_39884872的博客
11-28 261
在HTML5中，使用canvas元素可以给图形添加阴影效果。添加阴影效果时，只需利用图形上下文对象的几个关于阴影绘制的属性就可以了，如下所示：shadowOffsetX ——阴影的横向位移量shadowOffsetY——阴影的纵向位移量shadowBlur ——阴影的模糊范围shadowColor ——阴影的颜色shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y...
html边框颜色线性渐变,css3设置边框颜色渐变的方法有哪些
weixin_42519826的博客
06-15 1867
css3设置边框颜色渐变的方法有哪些发布时间：2020-09-14 14:51:54来源：亿速云阅读：110作者：小新css3设置边框颜色渐变的方法有哪些？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色...
CSS--border边框颜色渐变
bangwu6488的博客
08-29 1万+
本人前端小白一枚，写这些心得主要是为了记录自己的前端路上的成长及感悟。 废话不多说，平时我们在做边框border时，总能看到界面上一些边框颜色渐变的效果，比较常见的就是qq主菜单界面，我们发现他的边框并不是一条纯色的实线，如果对其进行放大，就可以看到下图所示的内容： 可以看到，其实它的边框是由...
css3使边框具有渐变的效果
tarajk05的专栏
12-16 2万+
css3中border-color属性包含有border-top-color, border-right-color, border-bottom-color , border-left-color四条边的属性设置。 使用CSS3的border-radius属性，可以设置边框不同的颜色。 如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px
css3实现border渐变色
diwuyanting的博客
12-25 3万+
话不多说 ，直接上代码： .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient(#ddd,#000) 30 30; border-image: -moz-linear-gradient(#ddd,#0
css3设置border渐变色
热门推荐
jinxi1112的博客
09-07 4万+
//方向由外向内 .demo1 { width: 200px; height: 100px; border: 10px solid transparent; border-radius: 15px 0 15px 0; -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303; -m
h5绚丽的边框-border渐变和字体颜色渐变
开心大表哥
12-01 1万+
1.先看效果图： 2.代码上部分注稀：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> </head> <body> <style> body{
css中使得border渐变方法
casanover
09-21 2万+
background-clip:padding-box,border-box; background-origin:padding-box,border-box; background-image:linear-gradient(135deg,#000,#000),linear-gradient(135deg,#E70303,#FFFF44); border:2px transparent sol
CSS3.0权威参考手册：边框、背景、颜色与文本效果
"这是一份详尽的CSS3.0参考手册，涵盖了从边框、背景、颜色、文本效果到用户界面、选择器等多个方面的CSS3特性。这份手册旨在成为新手学习和老手参考的重要工具，提供了版权信息为2009年腾讯ISD Web团队的详细教程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值