模块素运用css完成多种边框实际效果示例编码

2021-03-18 02:38 jianzhan

序言

近期在工作中中遇到1个值得思索的难题,在CSS中,要完成同1种实际效果将会有许多种方法,就例如今日所要讲的多种边框,有人将会会想,那还不简易?要是多少边框立即嵌套循环是多少个带边框的DIV元素不就可以了么!

是的,这样的确简易粗鲁,可是也会因而造成许多没什么具体实际意义的元素。

客观事实上,要完成一样实际效果,1个元素足矣!

接下来我将给大伙儿共享模块素怎样完成多种边框实际效果~~

1、双向边框实际效果

<!--HTML-->
<div class="box"></div>
/*CSS*/
.box{ width: 200px; height: 200px; border: 10px double #000;}

应用border-style: double便可完成简易的双向边框实际效果,完成实际效果以下:


border-style: double
 

完成方式尽管简易,可是缺陷也是是非非常显著:

     ① 没法精准操纵双向边框的粗细及之间的间距;

     ② 没法更改双向边框的款式,例如双向虚线边框;

     ③ 没法完成更多层级的边框实际效果。

2、双向多样化边框实际效果

/*CSS*/
.box{ width: 200px; height: 200px; border: 1px solid #000; outline: 1px dashed #f00; outline-offset: 10px;}

针对outline特性,大家平常用得较为少,其意味着元素的外轮廊,显示信息于边框外围,大多数数状况好像都只是用于消除表单控制的默认设置focus款式:outline: none;

而客观事实上,outline能够制做出与border特性近乎同样的实际效果,并且写法上也基本上沒有区别,可是这里還是大约讲讲这二者存在的微小区别:

     ① outline不占有具体室内空间尺寸,这1点与box-shadow很像;

     ② outline不可以像border1样拆分为border-left、border-right等特性;

     ③ outline不可以设定圆角。

上面事例中还用到了outline-offset特性,这个特性实际上是outline在CSS3中新加的特性,该特性不可以合拼简写在outline中,用于操纵外边框与外轮廊之间的间距。


outline特性
 

这个完成方式也很简易,并且更为灵便,可是也存在几个缺陷:

     ① outline特性没法设定圆角(火狐下能够设定-moz-outline-radius特性来完成圆角,只可是别的访问器下并没有此特性),因此圆角双向边框没法完成;

     ② 一样没法完成更多层级的边框实际效果。

3、多种多样化边框实际效果

/*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特性
 

此完成方法尽管看起来早已做到了大家最开始要想完成的实际效果,可是该方式存在着1个十分明显的缺陷,那便是没法像outline或border1样设定虚线边框,因此应用该方式是没法完成多种虚线边框实际效果的。

适配性: border自然适配性是最好是的;其次是outline,能够适配到IE8,可是outline-offset在IE下军队覆没;最终是box-shadow,能够适配到IE9。

完毕语

本文所详细介绍的方式都有各有的优缺陷,在具体应用之中能够依据应用情景灵便挑选,自然,除以上所写的3种方式以外,大家还能够融合伪元向来完成多种边框,实际上最后完成基本原理還是本文的这几种方式,有关伪元素,你能够看看写的伪元素::before与::after的用法这篇文章内容。

好了,以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。