按照老师的的写，没有效果

源自：4-1 CSS padding与图形绘制

按照老师的的写，没有效果

html:

<!doctype html>

<html>

<head>

<meta charset="utf-8>

<link rel="stylesheet" href="cssborder.css" type="text/css">

</head>

<div class="bordertest"></div>

</html>

css:

.bordertest{

width:150px;height:30px;

padding:15px 0;

border-top:30px solid "#fff";

border-bottom:30px solid "#fff";

background-color:"#fff";

background-clip:content-box;

}

提问者：azure1016 2016-08-30 17:42

个回答

Lion_ssg

2018-07-26 17:34:15

把最后的content-box改成你的名字bordertest，然后就好啦。我的是这样：
.line-tri{
width: 150px;
height: 30px;
padding: 15px 0;
border-top: 30px solid green;
border-bottom: 30px solid red;
background: orange;
background-clip: line-tri;
}

0
12只怕有心人

2016-11-01 15:21:23

Lz你好,你试着改下代码
首先<div class="bordertest"></div>是要放在<body></body>标签中的；
其实你要的效果已经实现了,只是你把它们都设成了#fff, 这是白色. 自然就什么都看不到了.

0
azure1016

2016-08-31 09:45:04

嗯，是要实现三道杠，截错了图，但是不管加不加引号都不能实现三道杠……你在你那里验证过了吗？？

0
typenny

2016-08-30 18:09:08

你是要实现三道杠？？？border-top:30px solid "#fff"中#fff不应该加引号……

0