border-image属性实现css边框特殊需求
来源:互联网 发布:javascript实战.pdf 编辑:程序博客网 时间:2024/05/22 23:49
------更新引用图片--2017-11-6----今天有人在群里问“设置div的边框,左边和上边边框颜色不同,会出现这种小尖角,有没有什么方法可以在不动html的情况下不出现这种小尖角,求各位大神帮忙”好啦,意思如图:
代码如下:
//css div{ height:200px; width:200px; border:20px solid red; border-left-color:yellow; } //html <div></div>
当左边设置不同的颜色时,左上角会出现三角形,而想实现的效果是将左边框设置成黄色的长方形。解决方案:一开始想要新增一个div定位、覆盖左边框,但是人家问的是不改变html结构,虽然这样简单但是被pass掉了。解决方案二:就是border-image这个css属性。边框采用图片,从来没有用过刚研究了下。代码如下:
//css div { height: 200px; width: 200px; border: 30px solid transparent; border-image-source: url(border.png); border-image-slice: 19%; /* border-image-width: 30px; */ /* border-image-slice: 20 20 20 20; */ } //html <div></div>
border-image-source:属性的意思就是border-imgage引用的图片地址,border-image-slice,就是将引用的图片分割成9块,分别应用在四条边上。说的比较笼统,最后放上参考链接,有兴趣的可以研究下:[css3:border-image边框图像详解](https://www.qianduan.net/css3border-image-bian-kuang-tu-xiang-xiang-jie/)[MDN border-image-slice属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-slice)最后是最终实现的效果:
border-image图片是我自己画的不具有参考性,所以使用 border-image-slice分割的时候才会有19%这个值(尝试得来的)
结束。太困了,有时间整理下...
阅读全文
0 0
- border-image属性实现css边框特殊需求
- CSS中边框border属性、border-raduis圆角与border-image详解
- HTML5基础加强css样式篇(css属性border详解:图片边框border-image-slice,border-image-repeat,border-image-width(二))(三十四)
- CSS border边框属性教程 CSS 边框即CSS
- CSS中元素的边框border属性
- 图片边框border-image
- div+css - CSS标准 - 8.5 Border properties边框属性
- CSS border 边框
- CSS设置border边框
- 10015---CSS Border(边框)
- css中的边框border
- CSS-Border(边框)
- css边框border样式
- css之border边框
- 理解CSS边框border
- CSS Border(边框)
- 理解CSS边框border
- css边框border
- Error:C:\Users\Administrator.gradle\native\23\windows-i386\native-platform.dll (拒绝访问。)
- 每天一个linux命令(23):Linux 目录结构
- 分析数据:使用Matplotlib创建散点图---路径问题
- 文章标题
- GreenDAO 学习笔记-小白教程(三)数据库升级及注意事项
- border-image属性实现css边框特殊需求
- sdnu1013.石子合并简化版
- 运营的基础名词整理
- PHP二维数组按键值排序
- VIM的高级配置一#VIM的安装
- nginx强制使用https访问(http跳转到https)
- 《软件开发者路线图—从学徒到高手》读书笔记
- 双重锁单例模式 观察者模式
- javaWeb--struts2框架之二解释