<div style="width: 300px;height: 300px;background-color: rgba(47,41,90,0.14);overflow: hidden;">
<div style="background-color: red;width: 260px;height: 40px;position: absolute;top: 0px;left: 20px;" ></div>
<div style="width: 300px;height: 300px;border: 40px dotted #36CBCB;box-sizing: border-box;position: relative;">
<div style="background-color: #36CBCB;width: 260px;height: 260px;position: absolute;top: -20px;left: -20px;"></div>
</div>
</div>
我是填充了一层红色来当边框的背景,也是通过定位来实现的,由于先写层级低于后面的边框层
1、先说明一个概念,任意圆角说的是任意直径的圆角,不是20度角,22度角的概念
2、border中有个点线的类型,这个类型中,随着调整border的宽度,圆的直径就会随之变化
3、确定了圆的直径,只需要用矩形覆盖掉中间空的那块位置,就变成圆角矩形了
4、如果只是需要圆角,不是需要圆角矩形,直接取一个圆的四分之一就可以了
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
那好像是个网页
给原始的图片增加一个透明的边框 然后再设置图片的图片的投影颜色
我的也是一样的耶
<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; }
你看看这样的可以不
这个就是发出来嘚瑟一下的,实际应用是真的少,只是让你知道还有这些方法可以用
在chrome浏览器中checkbox是设置不了border的,其他浏览器我没试。所以这个方法其实用到机会多,用label标签包着checkbox的,然后给label加padding也可以增大点击的区域。
也就那个三角形可以
因为border没有继承性,如果使用百分比,那么就没有参考对象,浏览器解析就不知道百分数乘以谁来确定边框的宽度,所以只能用指定的值得大小来确定.
...........................................就这样,会了吗?
他问的是这个吧。。。
你可以给小图标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>
background少了一个属性 ,禁止平铺 no-repeat
换行符
明白了。。。真是后知后觉哈哈
调戏一下老师
.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>
用border,1.为了增强用户体验,在前端领域,用户体验为王
2.为了增加可视化区域,给复选框加上透明边框,可视区域变大,还不影响整体效果,不是很好嘛
3.value的值正常写就好,看你有几个单选或复选框,给它们依次给value赋值,有助于后台识别选项
这只是个人意见,有更好的意见欢迎交流
你的图片不是背景吧 我是这样理解的。把图片设置为背景图 ,是可行的。但是我实现的时候出现了横拉条。你可以试试,相互讨论讨论
border-color的分号错误,是中文的分号
贴代码看一下
再外面套一层div,同宽同高同边框,把 .box2的border属性删掉
代码实现不会你还是先把基础的css学了的好 .obj .后面跟的是元素<div class="obj">通过你设置的类型 设置选择器设置css
理论上是可以的 但是教程中讲的是一种切合教程的方法
visible默认值。内容不会被修剪,会呈现在元素框之外。
hidden内容会被修剪,并且其余内容是不可见的。
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。