怎么用css设计边框(单元素利用css实现多重边框效果示例代码)
怎么用css设计边框
单元素利用css实现多重边框效果示例代码前言
最近在工作中遇到一个值得思考的问题,在CSS中,要实现同一种效果可能有很多种方式,就比如今天所要讲的多重边框,有人可能会想,那还不简单?要多少边框直接嵌套多少个带边框的li元素不就行了么!
是的,这样确实简单粗暴,但是也会因此产生很多毫无实际意义的元素。
事实上,要实现同样效果,一个元素足矣!
接下来我将给大家分享单元素如何实现多重边框效果~~
一、双重边框效果
<!--HTML--> <li class="box"></li>
/*CSS*/ .box{ width: 200px; height: 200px; border: 10px double #000;}
使用border-style: double
就可实现简单的双重边框效果,实现效果如下:
border-style: double
实现方法虽然简单,但是缺点也是非常明显:
① 无法精确控制双重边框的粗细及之间的间隔;
② 无法改变双重边框的样式,比如双重虚线边框;
③ 无法实现更多层次的边框效果。
二、双重多样化边框效果
/*CSS*/ .box{ width: 200px; height: 200px; border: 1px solid #000; outline: 1px dashed #f00; outline-offset: 10px;}
对于outline属性,我们平时用得比较少,其代表元素的外轮廓,显示于边框外围,大多数情况似乎都只是用于清除表单控件的默认focus样式:outline: none;
而事实上,outline可以制作出与border属性近乎相同的效果,而且写法上也几乎没有差别,但是这里还是大概讲讲这两者存在的细微差别:
① outline不占据实际空间大小,这一点与box-shadow很像;
② outline不能像border一样拆分成border-left、border-right等属性;
③ outline不能设置圆角。
上面例子中还用到了outline-offset属性,这个属性其实是outline在CSS3中新加的属性,该属性不能合并简写在outline中,用于控制外边框与外轮廓之间的距离。
outline属性
这个实现方法也很简单,而且更加灵活,但是也存在几个缺点:
① outline属性无法设置圆角(火狐下可以设置-moz-outline-radius属性来实现圆角,只可惜其他浏览器下并无此属性),所以圆角双重边框无法实现;
② 同样无法实现更多层次的边框效果。
三、多重多样化边框效果
/*CSS*/ .box{ width: 200px; height: 200px; border: 10px solid #000; border-radius: 10px; box-shadow: 0 0 0 10px #f00, 0 0 0 20px #0f0, 0 0 0 30px #00f;}
这里使用了box-shadow属性来替代outline属性,多重阴影效果叠加可以实现无数层边框效果,与此同时也能使用圆角属性border-radius来实现多重圆角边框效果。
box-shadow属性
此实现方式虽然看起来已经达到了我们最初想要实现的效果,但是该方法存在着一个非常显著的缺点,那就是无法像outline或border一样设置虚线边框,所以使用该方法是无法实现多重虚线边框效果的。
兼容性: border当然兼容性是最好的;其次是outline,可以兼容到IE8,但是outline-offset在IE下全军覆没;最后是box-shadow,可以兼容到IE9。
结束语
本文所介绍的方法各有各自的优缺点,在实际运用当中可以根据运用场景灵活选择,当然,除了以上所写的三种方法之外,我们还可以结合伪元素来实现多重边框,其实最终实现原理还是本文的这几种方法,关于伪元素,你可以看看写的伪元素::before与::after的用法这篇文章。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对开心学习网的支持。
- html5新的表单元素新的特性(HTML5表单验证特性知识点小结)
- 怎么用css设计边框(单元素利用css实现多重边框效果示例代码)
- element ui 表单动态验证(element的表单元素使用总结)
- html5表单元素自带验证功能(纯CSS3实现表单验证效果非常不错)
- 读卖乐园的彩灯(读卖乐园的彩灯)
- 新疆80后在淘宝卖干果 以前是 不务正业 如今帮乡亲致富(新疆80后在淘宝卖干果)
- 弄清楚了销 售 买 卖这四个字,母婴生意做起来就没那么难了(弄清楚了销售买)
- 数读 买首饰金是 投资黄金 吗 买金容易卖金难(数读买首饰金是)
- 销 售 买 卖 你真的了解这四个字了吗(销售买)
- 谢娜是得罪快乐大本营造型师了吗 全场被黑化(谢娜是得罪快乐大本营造型师了吗)
热门推荐
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
- python和java的共同语法(Python和Java的语法对比分析语法简洁上python的确完美胜出)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- 服务器高性能ssd是什么(为什么更推荐SSD技术的云服务器?)
- centos 测试环境搭建(centos7下安装并配置supervisor守护程序的操作方法)
- 如何看http状态码(10个常见的HTTP状态码详解)
- python加密和解密(python实现对输入的密文加密)
- idea里面怎么配置tomcat(intellij idea 使用Tomcat部署的项目位置在哪)
- python读写文件实验心得(Python文件读写常见用法总结)