HTML中只让border-color 一边有颜色 其他边没有颜色

发布网友 发布时间:2022-04-20 13:28

我来回答

11个回答

懂视网 时间:2022-04-06 16:14

在css样式中,很多初学css不知道怎么用css实现多色边框?其实如何实现多色边框我们可以用到border-colors属性,那么?css如何实现多色边框?下面我们来总结一下border-colors属性。

在css3中,我们可以用border-colors来制作多颜色的边框,但是也有很多人总把border-color和border-colors弄混淆,我们这里用到的是border-colors,并不是border-color。

border-colors语法:

-moz-border-left-colors:颜色值;对于border-colors属性,我们要注意三点:

1.如果border-width为w像素,就表示边框可以几种颜色,但是前提每种颜色都是颜色限制唯一的宽度。

2.因为border-colors并不能所有的浏览器都是使用,因此我们在代码前面加一个-moz-。

3.我们不能同时设置四条边颜色,但是我们可以分为四段颜色为四条边的设置。

实例:

<!DOCTYPE html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>CSS3 border-colors属性</title>
 <style type="text/css">
 #div1
 {
 width:200px;
 height:100px;
 border-width:5px;
 border-style:solid;
 -moz-border-top-colors:red orange yellow green cyan blue purple;
 -moz-border-right-colors: red orange yellow green cyan blue purple;
 -moz-border-bottom-colors: red orange yellow green cyan blue purple;
 -moz-border-left-colors: red orange yellow green cyan blue purple;
 }
 </style>
</head>
<body>
 <div id="div1">
 </div>
</body>
</html>

具体代码效果:

微信截图_20181023134127.png

7-3-3.png

分析:在以上可以看到border-width:5px;说明使用了5中颜色,那么边框的设置我们就可以使用五种颜色。

热心网友 时间:2022-04-06 13:22

1、首先打开hbuilder编辑器, 新建一个html文件,里面创建一个div容器,并设置div的class属性为div。

2、然后在head标签中的style标签里面给div一个高度和宽度,并设置div的背景颜色和边框,再设置上、下、左边框的border-color属性为rgba,rgba中设置透明度为0,这样就可以只要一个边有颜色了。

3、左后打开六七,就可以看到这个div只有右侧的边是有颜色的了。

热心网友 时间:2022-04-06 14:40

只让border的一边有颜色:

    了解border属性:

1、border(包括四条边,统一设置四条边框的样式)

如代码:

<div style="width:100px;height:100px;border:1px solid red;">nihao</div>

2、border-top(代表上边框,只能设置上边框的各样式)

如代码:

<div style="width:100px;height:100px;border-top:1px solid red;">nihao</div>

3、border-left(代表左边框,只能设置左边框的各样式)

如代码:

<div style="width:100px;height:100px;border-left:1px solid red;">nihao</div>

4、border-right(代表右边框,只能设置右边框的各样式)

如代码:

<div style="width:100px;height:100px;border-right:1px solid red;">nihao</div>

5、border-bottom(代表下边框,只能设置下边框的各样式)

如代码:

<div style="width:100px;height:100px;border-bottom:1px solid red;">nihao</div>

    根据上面的属性介绍:

1、border:none;(none代表没有边框);

2、1px(代表边框的大小);

3、red(代表颜色,可以写16进制,如#F00FF0;);

4、根据自己的需求替换对应的属性值就可以了。

热心网友 时间:2022-04-06 16:14

border: 1px solid #000; //四周都有1像素黑色的实线
border-left: 1px solid #000; //左边有1像素黑色的实线
border-right: 1px solid #000; //右边有1像素黑色的实线
border-top: 1px solid #000; //上边有1像素黑色的实线
border-bottom: 1px solid #000; //下边有1像素黑色的实线

热心网友 时间:2022-04-06 18:06

两种办法都可以。
1、一种是设置一个边框:
border-left,border-right,border-right,border-right,都可以,给其中一个设置样式即可。
2、还有一种办法是在设置border的基础上,再去设置border-color:
border-color的定义用法:
border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。
例如 border-color:red green blue pink;

上边框是红色
右边框是绿色
下边框是蓝色
左边框是粉色
要想设置一边颜色可以修改成:
border-color: red transparent transparent transparent;

上边框是红色,其他边框透明。

热心网友 时间:2022-04-06 20:14

html让border-color一边有颜色:
直接写border-方向-color:color;就可以了
前提是,你的border-color对应的border必须是存在的,如果没有边框,怎么设都没用。
其它边没有颜色的话你就要设置为透明或者无边框
例如:border:1px solid;border-left-color:brown;border-right-color:transparent;border-top-color:transparent;border-bottom-color:transparent;
或者border-left:1px solid brown;

热心网友 时间:2022-04-06 22:38

 border-left:1px rgba(0,0,0,1) solid; border-right:1px rgba(0,0,0,0) solid;

左边框1px黑色,右边框1px黑色透明,rgba()前面三个参数是rgb色值最后一个参宿代表透明度。

热心网友 时间:2022-04-07 01:20

border-left:solia 1px red; //左边框着红色

以此类推。追问其他边框不设置是黑色的,设置的话又跟周围的颜色不融合,,,有没有办法让其他三边的边框弄成无色,或透明

追答不设置就没有颜色啊,
看一下代码,具体要什么样式,
黑色估计不是你设置的那个div的颜色。

或者这样试下:border-left:solia 1px transparent; //transparent为透明

热心网友 时间:2022-04-07 04:18

将边线宽度设置为0,就ok了追问边线宽度 的右边要用到 ,其他的没用,把其他的边的颜色弄透明,或没有其他边 只有右边,,可以吗

追答可以的

热心网友 时间:2022-04-07 07:32

border-left ,border-right border-top border-bottom
如左边为红色 border-left:red

热心网友 时间:2022-04-07 11:04

boder-right:1px red;
声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。
E-MAIL:11247931@qq.com