CSS深入理解之border_技术问答

假蛙工程师

本课程实现圆角的技巧已经淘汰了？: 2024-05-19 0回答·128浏览

慕先生4328837

只能实现这种效果标红的区域怎么能填充上颜色

</div>

我是填充了一层红色来当边框的背景，也是通过定位来实现的，由于先写层级低于后面的边框层

2021-04-13 1回答·703浏览

宝慕林2162907

任意圆角怎么实现的

1、先说明一个概念，任意圆角说的是任意直径的圆角，不是20度角，22度角的概念

2、border中有个点线的类型，这个类型中，随着调整border的宽度，圆的直径就会随之变化

3、确定了圆的直径，只需要用矩形覆盖掉中间空的那块位置，就变成圆角矩形了

4、如果只是需要圆角，不是需要圆角矩形，直接取一个圆的四分之一就可以了

2019-03-31 1回答·1517浏览

weixin_慕先生0156415

图是真的难看: 2019-03-08 2回答·1104浏览

vZina

求background课程！

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

2019-03-04 1回答·1358浏览

_So_

老师的ppt是怎么做的啊: 那好像是个网页; 2018-08-26 1回答·1637浏览

qq_632_0

filter: drop-shadow出来的图标都是半透明的。怎么解决？: 2018-08-21 0回答·1781浏览

qq_632_0

遇到阻碍了， filter: drop-shadow没有效果，到底需要满足哪些隐藏条件才能触发: 给原始的图片增加一个透明的边框然后再设置图片的图片的投影颜色; 2018-08-20 2回答·3334浏览

慕mio远山

IE和Chrome的效果一样啊

我的也是一样的耶

2018-08-10 2回答·1571浏览

慕九州5109875

求教，十字架是通过伪类after 样式里面哪些样子生成的？

<div class="add">
</div>

.add{
  position: relative;
  width: 120px;
  height: 120px;
  margin: 200px;
  color: #ccc;
  border: 1px solid;
  transition: color .5s;
}
.add::before,
.add::after{
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
}
.add::before{
  margin-top: -5px;
  margin-left: -30px;
  border-top: 10px solid;
}
.add::after{
  margin-top: -30px;
  margin-left: -5px;
  border-left: 10px solid;
}
.add:hover{
  color: red;
  cursor: pointer;
}

你看看这样的可以不

2018-07-12 2回答·1938浏览

qq_袁媛_0

这代码结果我只无语了: 这个就是发出来嘚瑟一下的，实际应用是真的少，只是让你知道还有这些方法可以用; 2018-06-27 1回答·1570浏览

_fisher_man

求Checkbox响应区域增大的完整代码，呜呜呜: 在chrome浏览器中checkbox是设置不了border的，其他浏览器我没试。所以这个方法其实用到机会多，用label标签包着checkbox的，然后给label加padding也可以增大点击的区域。; 2018-06-07 2回答·1790浏览

明哥Leon

讲的不错！: 也就那个三角形可以; 2018-02-05 3回答·1484浏览

慕码人3430520

border-width为什么不支持百分比？: 因为border没有继承性,如果使用百分比,那么就没有参考对象,浏览器解析就不知道百分数乘以谁来确定边框的宽度,所以只能用指定的值得大小来确定.; 2018-02-03 2回答·2041浏览

逍遥迷望

怎么任意圆角那: 已采纳慕仙0465555 的回答; ...........................................就这样，会了吗？; 2017-12-15 3回答·1762浏览

逍遥迷望

覆盖4个圆: 他问的是这个吧。。。; 2017-12-15 3回答·1701浏览

好好学习的好学生

还是搞不清楚怎么改变png图片颜色？，老师的代码也运行不起

你可以给小图标icon的外面加一个div，设置和小图标一样的宽高，如20px，并设置overflow:hidden;试一下

<!doctype html>
<html>
<head>
<style type="text/css">
div {	
    width: 20px;
    height: 20px;
    overflow: hidden;
}
img {
    width: 20px;
    height: 20px;
    filter: drop-shadow(20px 0 pink);
    position: relative;
    left: -20px;
    border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div>
    <img src="xxx.png" alt="">
</div>
</body>
</html>

2017-12-13 4回答·3752浏览

好好学习的好学生

为什么不能居右呢，求助~: 已采纳只是小丑呗的回答; background少了一个属性，禁止平铺 no-repeat; 2017-12-12 4回答·2004浏览

慕盖茨1266757

看border的4-1.4时候说有background课程, 没找到: 换行符; 2017-12-10 1回答·1500浏览

小小小小小鲸鱼

double怎样分配实线和虚线宽度呀？: 明白了。。。真是后知后觉哈哈; 2017-12-07 1回答·1435浏览

慕斯3685545

调戏一下老师

调戏一下老师

2017-12-04 1回答·1371浏览

路鸿宇

请问为什么原图overflow：hidden；隐藏不了。

.del-box{overflow:hidden;width:40px;height:40px;}    
.del-ico{position:relative;left:-40px;display:inline-block;width:80px;height:40px;border-right:40px solid transparent;filter:drop-shadow(40px 0 #ff0);}

<div class="del-box">				
    <img class="del-ico" src="../../../img/icon/del.png" alt="">			
</div>

2017-09-26 4回答·2509浏览

冷寒轩111

实现单选框和复选框的办法

用border，1.为了增强用户体验，在前端领域，用户体验为王

2.为了增加可视化区域，给复选框加上透明边框，可视区域变大，还不影响整体效果，不是很好嘛

3.value的值正常写就好，看你有几个单选或复选框，给它们依次给value赋值，有助于后台识别选项

这只是个人意见，有更好的意见欢迎交流

2017-08-29 1回答·2221浏览

星花火月

为什么我的图片没有靠右显示QAQ: 已采纳 Springtime3762713 的回答; 你的图片不是背景吧我是这样理解的。把图片设置为背景图，是可行的。但是我实现的时候出现了横拉条。你可以试试，相互讨论讨论; 2017-08-14 2回答·1789浏览

兰馨小驻

为什么写出来的颜色不显示？: border-color的分号错误，是中文的分号; 2017-08-02 3回答·1630浏览

橡子米米

double

贴代码看一下

2017-08-02 1回答·1352浏览

叶小燕哦

右边边框怎么实现

再外面套一层div，同宽同高同边框，把 .box2的border属性删掉

2017-07-26 1回答·1001浏览

娜娜程序瑗

视频里讲的觉得有点莫名其妙，.dotted{ } .box{ } 怎么出现的圆: 代码实现不会你还是先把基础的css学了的好 .obj .后面跟的是元素<div class="obj">通过你设置的类型设置选择器设置css; 2017-07-13 3回答·1708浏览

风到这里就是粘

在火狐也是小圆: 已采纳 Jeff26 的回答; 理论上是可以的但是教程中讲的是一种切合教程的方法; 2017-07-08 2回答·1676浏览

茉雨森森

overflow 是啥

visible默认值。内容不会被修剪，会呈现在元素框之外。

hidden内容会被修剪，并且其余内容是不可见的。

scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit规定应该从父元素继承 overflow 属性的值。

2017-07-08 1回答·1571浏览