CSS3之border-color属性

最新推荐文章于 2022-07-17 12:41:56 发布
最新推荐文章于 2022-07-17 12:41:56 发布
阅读量280 收藏
点赞数

1、border-color

（1）border-top-color：边框上部颜色

（2）border-bottom-color：边框下部颜色

（3）border-left-color：边框左部颜色

（4）border-right-color：边框右部颜色

2、浏览器兼容性

（1）IE6、7、8不兼容

（2）火狐2.0不兼容

（3）Chrome 1.0和2.0不兼容

3、属性举例

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>CSS 3 border-color属性</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style type="text/css">
            body{
                width:50%;
                height:100%;
                font-size:20px;
                text-align:center;
            }
            #body_div{
                border:10px solid #FF0000;
                border-top-color:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                border-right-color:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                border-bottom-color:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                border-left-color:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                -moz-border-top-colors:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                -moz-border-right-colors:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                -moz-border-bottom-colors:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
                -moz-border-left-colors:#FF000 #999 #AAA #BBB #00FF00 #DDD #EEE #0000FF;
            }
        </style>
    </head>
    <body>
        <div id="body_div">CSS 3 border-color属性</div>
    </body>
</html>
4、实例效果图



iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实例讲解使用CSS实现多边框和透明边框的方法
web前端基础入门教程
02-25 3585
　Backgrounds & Borders Level 3 还是一份草案的时候，CSS WG 就在是否支持多重边框的问题进行了大量的探讨，就像是讨论多重背景图片一样。不幸的是，当时认为多重边框的用处并不大，即使需要也可以使用border-image属性来模拟。不过，WG显然忘记了在 CSS 代码中灵活地调整边框，才是我们需要的，现在开发者只能使用一些Hack手段来模拟多重边框，比如使用多...
CSS3的边框（border）属性-color
weixin_34082789的博客
04-23 138
首先来介绍第一个：Border-color 有css基础的同学肯定知道这个是设置它边框的一个属性： 首先看下它的语法： border-color ： <color> 相关属性 ：border-top-color, border-right-color, border-bottom-color , border-left-color 看下它的取值： <color&g...
CSS3详解：border color
yaolei258的专栏
04-17 927
今天的主题是border color。大家都知道css中的border属性是经常用到的，其写法很简单，如：border:1px solid #333；border color和这有所不同，是不能简写的。 当前浏览器支持情况：Firefox border color写法说明： -moz-border-top-colors:#A #B #C # D ···；其中A、B、C、D 等都是6位颜色值，
css3之border-color
weixin_30892763的博客
03-27 182
-moz-border-top-colors：上边框-moz-border-right-colors：右边框-moz-border-bottom-colors：下边框-moz-border-left-colors：左边框 这个css是用来定义边框颜色的，可以给边框定义多种颜色，截至目前为止，仅 Firefox 支持，而且必须通过添加前缀 -moz- 才可实现。 举例：...
控制边框颜色：《CSS3 Border-color》
date25000的博客
07-10 201
CSS3中有关于Border的属性一共有三个:圆角border-radius,图片边框border-images,边框多颜色border-color,其中圆角border-radius是常用的一个属性，而且现在很多网站制作圆角效果都使用border-radius来实现; 在CSS2中，我们可以把border-color同时应用到不同的边框上，也可以分别在各边上色，如： bord...
CSS3 聊天气泡框以及 inherit、currentColor 关键字
weixin_33748818的博客
07-20 225
效果如上图所示，主要用到CSS3的伪类::after、::before，以及圆角边框border-radius属性。对于下面的气泡框，可以有两种方式实现小三角： 传统方式，利用CSS画小三角，利用到了透明背景和边框属性transparent的应用。 CSS3的transform属性的使用 然后通过position定位到合适的位置。 此...
CSS border-color 属性使用方法
09-27
**CSS `border-color` 属性详解** `border-color` 是CSS中的一个重要属性，它用于定义元素边框的颜色。通过此属性，你可以独立地为元素的上、右、下、左边框设置不同的颜色，从而实现丰富的视觉效果。让我们深入...
CSS3之边框多颜色Border-color属性使用示例
12-08
在CSS3中，为了实现边框多颜色的效果，我们需要使用浏览器特定的前缀来扩展`border-color`属性。目前，这些前缀主要是 `-moz-` 和 `-webkit-`，分别对应Firefox和旧版WebKit浏览器（如Safari和Chrome）的私有属性。...
CSS border-width 属性使用教程
12-10
在实际应用中，我们可以结合其他CSS属性，如`border-style`（定义边框的样式，如实线、虚线等）和`border-color`（定义边框颜色），来创建丰富的边框效果。例如： ```css p { border-style: solid; border-color:...
border-color属性设置单边边框和综合四边边框颜色
zy1992As的博客
06-08 6621
Web前端培训实操环节中，同学们经常会遇到边框的颜色设置问题。border-color属性用于设置边框的颜色，其取值可为预定义的颜色英文单词(如red、blue)、十六进制颜色值#RRGGBB(如#FF0000或#F00)或RGB模式rgb(r,g,b)(如rgb(0,255,0)括号里是颜色色值或百分比)，实际工作中最常用的是十六进制颜色值。...
html边框颜色线性渐变,css3设置边框颜色渐变的方法有哪些
weixin_42519826的博客
06-15 1821
css3设置边框颜色渐变的方法有哪些发布时间：2020-09-14 14:51:54来源：亿速云阅读：110作者：小新css3设置边框颜色渐变的方法有哪些？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色...
如何在dw给段落设置背景颜色_css3如何设置边框颜色渐变？css3边框颜色渐变的两种实现方法...
weixin_39937524的博客
11-29 1106
很多时候在开发网页的时候，可能因为一些原因需要为边框设置颜色渐变，那么该如何设置颜色边框渐变？本篇文章将为大家介绍使用css3设置边框颜色渐变的方法。程序猿的生活：web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线）​zhuanlan.zhihu.com我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色渐变，那么两个属性如...
iview的基本样式custom.less
u013994400的博客
12-13 461
@import “color/colors”; // Prefix @css-prefix : ivu-; @css-prefix-iconfont : ivu-icon; // Color @primary-color : #2d8cf0; @info-color : #2db7f5; @success-color : #19be6b; @processing-color : @primary-color
基于element-ui的vue组件的封装（三）
weixin_41432139的博客
07-17 406
封装一个element-ui风格的input组件
CSS3之边框多颜色Border-color
梦龙小站
10-11 5997
CSS3之边框多颜色Border-color是专为边框的多颜色而准备的属性。在CSS2中也有边框颜色这个属性，但是边框颜色属性在CSS3中又有什么惊人之举呢?下面就为大家介绍一下CSS3之边框多颜色Border-color吧。
css3中边框的4种样式
热门推荐
xyjikl
07-08 2万+
border是CSS的一个属性，用它可以给能确定范围的HTML标签画边框，它可以定义边框线的类型、宽度和颜色，最终可以制作一些特殊效果 css3的边框有4种样式： 1.border-color（边框的颜色） 一般设置边框都有3个属性-宽度、线的样式、颜色，如果宽度设置了很多PX，那么就可以给边框设置很多颜色，让边框显示出渐变的效果，不过设置边框不同颜色时只能通过borde
flex常见组件背景及边框颜色实例
hugoandpig的专栏
08-30 5229
一、Button 1、flex4as方式实例       xmlns:s="library://ns.adobe.com/flex/spark"        xmlns:mx="library://ns.adobe.com/flex/halo"       minWidth="1024" minHeight="768"        creationComplete="
css border-style属性
最新发布
04-01
CSS border-style属性用于设置元素边框的样式。 语法： ``` border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; ``` 属性值： - none：没有边框 - hidden：与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值