CSS深入理解之border_技术笔记

慕函数1072086 2021-11-15

border-color默认就是color：当没有指定border-color的时候，会使用color的颜色
类型的还有 box-shadow，text-shadow，outline等
实际用途：hover

0赞 · 0采集

CC囧喵 2019-12-04

border-color

1、在没有指定border-color时，默认使用color作为边框色

box-shadow、text-shadow、outline均有此特性

2、案例

只需一个color的hover变化，就可以一起变色；且transition过渡也只要一个color属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.add {
display: inline-block;
width: 120px;
height: 120px;
border: 1px solid;
color: #ccc;
position: relative;
transition: color 0.5s;
}
.add:before {
content: "";
display: block;
width: 80px;
border-top: 10px solid;
position: absolute;
left:20px;
top: 55px; 
}
.add:after {
content: "";
display: block;
height: 80px;
border-left: 10px solid;
position: absolute;
left: 55px;
top: 20px; 
}
.add:hover {
color: #234BD5;
}
</style>
</head>
<body>
<a href="" class="add"></a>
</body>
</html>

0赞 · 1采集

pinzaghi 2019-10-09

border-color的默认颜色就是color

截图
0赞 · 0采集
机智的小猴子 2019-08-08

加号变色。

截图
0赞 · 0采集

qq_白菜_15 2019-08-04

1.添加了过渡
2.利用了calc函数居中
3.声明父div，设置border的时候不声明颜色，只声明color
4.before，after不声明color，继承父元素div的color
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<title>Document</title>
<style>
div { 
border: 1px solid;
color: blue;
width: 150px;
height: 150px;
position: relative;
transition: 1s color;
}
/* 横着放 */
div::before {  
 content: "";
 width: 60px;
 height: 20px;
 border-bottom: 20px solid;
 display:inline-block;
 box-sizing: border-box;
 position: absolute;
 left: calc(50% - 30px);
 top: calc(50% - 10px);
 }
 /* 竖着放 */
 div::after {
 content: "";
 height: 60px;
 width: 20px;
 border-left: 20px solid;
 display:inline-block;
 box-sizing: border-box;
 position: absolute;
 z-index: 1;
 left: calc(50% - 10px);
 top: calc(50% - 30px);
 }
 div:hover {
 color: red;
 }
 </style>
 </head>
 <body>
 <div></div>
 </body>
 </html>

0赞 · 0采集

梦挽情歌 2019-04-02

border-color默认颜色就是color，类似的还有box-shadow，text-shadow

1赞 · 1采集
feibenren 2019-02-27

border-color默认值

截图
0赞 · 0采集
qq_银色水晶瓶_0 2018-11-24

++++++++++++++

截图
0赞 · 0采集
qq_银色水晶瓶_0 2018-11-24

十字和框都是border画的

截图
0赞 · 0采集
qq_银色水晶瓶_0 2018-11-24

---------------

截图
0赞 · 0采集
qq_银色水晶瓶_0 2018-11-24

+++++++++++

截图
0赞 · 0采集
qq_银色水晶瓶_0 2018-11-24

---------------------

截图
0赞 · 0采集
卓明古 2018-11-20

border的颜色随着color颜色变化，可以改变color值让边框变色

0赞 · 0采集
慕妹517547 2018-08-16

当没有制定border-color的时候，会使用color作为边框色

0赞 · 0采集
慕村5400966 2018-07-16

这个ppt变色的效果怎么实现哒

0赞 · 0采集
smilemonters 2018-05-22

利用color变色

截图
0赞 · 0采集
smilemonters 2018-05-22

不利用border-color的变色方法

截图
0赞 · 0采集
S向日葵s 2018-05-09

border-color没有指定颜色的时候会呈现默认的颜色如:border:1px solid;

0赞 · 0采集

大雅 2018-04-12

<!DOCTYPE html>
<html>
<head></head>
<style>
.add{
	display: block;
	width: 100px;
	height: 100px;
	position: relative;
	color: #ccc;
	transition: color .25s;
	border: 1px solid;
}
.add:before {
	content: "";
	width: 80px;
	position: absolute;
	left: 10px;
	top: 45px;
	border-top:10px solid;
}
.add:after {
	content: "";
	height: 80px;
	position: absolute;;
	left: 45px;
	top: 10px;
	border-left: 10px solid;
}
.add:hover {
	color: #067;
}
</style>
<body>
<div >
</div>
<p></p>
<a class="add" href="javascript:"></a>
</body>
</html>

1赞 · 1采集

Seize_fc 2018-04-09

better way

截图
0赞 · 0采集
葫芦胡 2018-02-24

border-color的默认值是color 一样的话设置一个即可且hover 得到的transiton就写color即可

0赞 · 0采集
qq_逍遥自在生无所求_0 2018-01-03

border-double:双线边框；

0赞 · 0采集
围棋号 2017-11-17

chrome内嵌3D图效果时，有可能不是完全相同

截图
0赞 · 0采集
qq_过好每一天_0 2017-11-15

hover与图形变色

截图
0赞 · 0采集
qq_啊呐_03348953 2017-11-06

border-color不填时默认与color值一致应用：边框与文字hover时，颜色设置一次

0赞 · 0采集
qq_龙颖_1 2017-10-05

bordercolor运用有点不懂

截图
0赞 · 0采集
qq_SunshineBoy_11 2017-09-07

border-color 与color 的区别，当border-color没有设置颜色的时候他的边框颜色默认color的颜色，color设置成什么颜色，边框就会变成什么样的颜色

0赞 · 1采集
前端薇薇 2017-08-30

传统写法：3处hover变色

截图
0赞 · 0采集
前端薇薇 2017-08-30

精彩写法案例：hover与图形变色仅需一处hover变色！

截图
0赞 · 0采集
一元两次方程 2017-08-24

border-color默认是color的设置 <!DOCTYPE html> <html> <head></head> <style> .add{ display: block; width: 100px; height: 100px; position: relative; color: #ccc; transition: color .25s; border: 1px solid; } .add:before { content: ""; width: 80px; position: absolute; left: 10px; top: 45px; border-top:10px solid; } .add:after { content: ""; height: 80px; position: absolute;; left: 45px; top: 10px; border-left: 10px solid; } .add:hover { color: #067; } </style> <body> <div style="border-top:double 60px; border-bottom:solid 20px; width:120px; height:20px; color:blue;"> </div> <p></p> <a class="add" href="javascript:"></a> </body> </html>

4赞 · 0采集

数据加载中...