                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /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;

}

01:55

azure1016

2016-08-30

源自：CSS深入理解之padding 4-1

关注问题我要回答

979

操作

收起

4 回答

Lion_ssg
2018-07-26

把最后的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

Lz你好,你试着改下代码

首先<div class="bordertest"></div>是要放在<body></body>标签中的；

其实你要的效果已经实现了,只是你把它们都设成了#fff, 这是白色. 自然就什么都看不到了.

0 回复有任何疑惑可以回复我~

azure1016 提问者
2016-08-31

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

0 回复有任何疑惑可以回复我~

#1

Sofronia3427947

颜色值为什么呀加引号？ #fff是白色设置了跟背景色一样的你也看不见

2016-10-01 回复有任何疑惑可以回复我~

#2

你的最后有效果了没？我的也没效果，不知道原因。如果你能知道，谢谢告诉我

2016-10-24 回复有任何疑惑可以回复我~

typenny
2016-08-30

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

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

CSS深入理解之padding

参与学习 52482 人
解答问题 56 个

本css视频教程中，将深入介绍CSS中padding属性的特点，常用特性

本课相似问答

3 回答前辈，我找照你的写法写了，但是好像没什么用啊！就最后的button表单按钮padding？？

3 回答三道杠老师为什么不写下代码，看看效果啊？

2 回答为什么我的代码里两个按钮效果一致？（使用的是chrome浏览器）

1 回答在浏览器的效果都一样么

2 回答这节的代码我打出来怎么不见效果呢？

搜索更多本课相关问答

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

我要回答关注问题

意见反馈帮助中心 APP下载