• 站长首页
  • 网站
    采集规则 HTML模板 帝国模板 杰奇模板 网站插件
  • 技术资讯
    随心笔记 优化技巧 网站教程
  • 工具软件
    装机必备 手机软件 电脑软件 建站工具
  • 学习题库
快捷导航

网站

采集规则 HTML模板 帝国模板 杰奇模板 网站插件

技术资讯

随心笔记 优化技巧 网站教程

工具软件

装机必备 手机软件 电脑软件 建站工具

学习题库

CSS 多边框 实现教程

栏目 关关 自适应 帝国 关闭 杰奇 共享 灵动

QQ联系
  • 站长首页

  • 帝国模板

  • 杰奇模板

  • 建站工具

  • 网站插件

  • 随心笔记

  • 优化技巧

  • 采集规则

  • 装机必备

  • 网站教程

  • 手机软件

  • 电脑软件

当前位置:首页 > 技术资讯 > 网站教程

CSS 多边框 实现教程

时间:2020-01-16 13:23:09发布者:admin浏览:597次
正文

《CSS Secrets》是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。

CSS Secrets

问题

Backgrounds & Borders Level 3 还是一份草案的时候,CSS WG 就在是否支持多重边框的问题进行了大量的探讨,就像是讨论多重背景图片一样。不幸的是,当时认为多重边框的用处并不大,即使需要也可以使用border-image属性来模拟。不过,WG显然忘记了在 CSS 代码中灵活地调整边框,才是我们需要的,现在开发者只能使用一些Hack手段来模拟多重边框,比如使用多重元素的嵌套来模拟多重边框。现在,我将告诉你一些更优秀的方法,无需使用多余的标签即可实现多重边框。

box-shadow解决方案

现在,大多数的时候都用box-shadow来创建阴影。不过,很少有人知道它还接受第四个参数(spread),该参数可以缩放阴影的范围。比如下面的示例,我们创建了一个水平和垂直偏移量为0 的阴影,它就使用了上述所说的第四个参数:

background: yellowgreen;box-shadow: 0 0 0 10px #655;

效果如下图所示:

多重边框

图注:使用 box-shadow 模拟边框线

这还不够令人惊讶,因为它和我们使用 border 创建的边框差不多。不过,强大的是我们可以使用逗号来创建任意数量的阴影。所以,只需要继续添加阴影就可以实现多重阴影了,比如,添加一个颜色为 deeppink 的边框:

background: yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

唯一需要牢记的事情就是,box-shadow 属性是叠在一起的,第一个阴影总是位于最顶层,所以你需要调整阴影的大小。比如,在上一段代码中,我们希望最外层的边框为 5px,那么我们就可以设置一个 15px(10px + 5px) 的阴影。如果你需要,那么就可以为指定任意层次的阴影:

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);

除了下述的少数情况外,使用 box-shadow 的解决方案都很好用:

阴影并不是边框,它们并不占有实际的空间,也不能归属于 box-sizing 的范围。不过,你可以通过使用内边距或外边距(取决于阴影是内部的还是外部的)占据额外的空间来模拟。

上述示例模拟的边框是位于元素外部的。它不能捕获类似悬停和点击的鼠标事件。如果事件很重要,那么可以通过添加 inset 关键字让阴影出现在元素的内部。注意,你可能需要添加额外的内边距来扩充空间。


outline的解决方案

在某些情况下,如果我们只需要两层边框,那么我们只需要一层常规的边框和一层outline 就可以实现。这也让我们的边框在样式上保持了足够的灵活性(比如我们想要一个虚线边框),但是使用 box-shadow 的话,我们只能模拟出实线边框。如下图所示:

多重边框

图注:使用 box-shadow 模拟两条轮廓线

background: yellowgreen;border: 10px solid #655;outline: 15px solid deeppink;

使用 outline 的另一个好处就是,我们可以通过 outline-offset 控制 outline 到元素边框的距离,该属性甚至可以接受负值。这对很多效果都非常有用,如下图所示:

多重边框

*注:对于虚线样式的轮廓线,通过给 outline-offset 设置负值,创建了一个基础的缝纫效果 *

不过,这种方法也有一些限制:

就像起初说的那样,这种方法只能模拟两层边框,因为每个元素只能创建一个 outline。如果需要创建多重边框,那么只能使用 box-shadow的方法。

border-radius 并不能让 outline 呈现圆角效果,所以,即使你的边框是圆角的,outline 仍然是直角的(如下图所示)。注意,CSS WG 认为这是一个 bug,在未来border-radius可能可以将 outline 变为圆角。

根据 CSS User Interface Level 3 specification 的说法:“outliens 可能并不是矩形。”虽然大多数情况下它看起来像是矩形,但是在你使用这一方法时,还是需要进行跨浏览器测试的。

多重边框

图注:通过outline创建的轮廓线并没有贴合元素的圆角,这个问题在未来可能会被修正

border-colors解决方案

border-colors是一个独特的属性,从字面上来说就是为多边框而生,只可惜的是,到目前为止这仅是Gecko内核浏览器独有的属性。

如果不追究浏览器的兼容性,那么border-colors也可以实现多边框的效果。在具体使用时,需要分成四边边框来写:

-moz-border-top-colors: <color> <color> <color>*; /*顶边边框*/
-moz-border-right-colors:<color> <color> <color>*; /*右边边框*/
-moz-border-bottom-colors: <color> <color> <color>*; /*底边边框*/
-moz-border-left-colors: <color> <color> <color>*; /*左边边框*/

多重边框

虽然这种方式也能实现多边框效果,但相比前两种解决方案而言要麻烦一些,来看一个简单示例:

border: 10px solid;-moz-border-top-colors: red red red red green green green blue blue blue;-moz-border-bottom-colors: red red red red green green green blue blue blue;-moz-border-right-colors: red red red red green green green blue blue blue;-moz-border-left-colors: red red red red green green green blue blue blue;

为了要实现三个颜色的多边框效果,red占4px,green占3px和blue点4px。需要大费周折。而且还不能直接写border-colors,因为浏览器不识别这样的属性。

除此之外,目前浏览器对这个属性支持度相当的弱。可以说,它只是Firefox的私有属性。

扩展阅读

Multiple Backgrounds and Borders with CSS 2.1

Multiple Borders

Multiple Borders with CSS

Multiple borders methods with CSS

总结

在CSS2.1的时代要实现多边框的效果,大多数都是依赖于添加标签或依赖于伪元素实现。而今天实现多边框的方案也越来越多,比如box-shadow和outline等。虽然这些方法能更好的帮助大家实现多边框效果,但每一种方案都有其自己的利弊。不过随着技术的向前发展,说不定哪一天会有一个属性直接有支持多边框,就如Firefox的私有属性-moz-border-<[top]|[right]|[bottom]|[left]>-colors。让我们一起期待吧。


   责任编辑:admin
  • 上一篇:css背景图片自适应
  • 下一篇:css :before和:after伪元素的使用教程
  • 加入收藏
  • 打印

相关阅读

  • 一段HTML的跳转代码,挺好看的加载,所以分享出来!

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>正在进入</title> </head> <body> <form name=loading>  <p align=center>...

  • 2020-08-19
  • HTML5----响应式(自适应)网页设计与改写!

    现在,随着手机用户越来越多,手机访客已经慢慢超越PC端访客了,那如何让自己的网站自适应手机端,那么就需要我们在页面上下功夫,但移动端的布局不同于pc端,首先我们要知...

  • 2020-04-27
  • 通过浮动+定位实现两个div在同一行

    通过浮动+定位实现两个div在同一行代码如下:<div style="padding-top:10px;padding-bottom:2px;float:left;position:relative;"> <img src="images/icon1.png" width="60px...

  • 2020-01-16
  • 图片的翻转按钮怎么制作

    【图片的翻转按钮怎么制作】请问下面这张图片的翻转按钮是用什么方法制作的。    是把一个透明图片当背景。还是CSS透明实现的。  .btn{  width : xxpx;  height...

  • 2020-01-16
  • 网页布局中CSS布局调试的有效方法

    本文向大家介绍一下网页布局中CSS布局调试的有效方法,主要从十个方面来向大家介绍,希望本文介绍对你有所帮助。  网页布局中CSS布局调试的有效方法    网页设计中CS...

  • 2020-01-16

    资讯列表

    • 随心笔记
    • 优化技巧
    • 网站教程

    文章排行榜

    • 1IIS多个协议 显示一个问号如何修复?
    • 2怎样给网页添加天气预报代码插件
    • 3帝国cms前台投稿不显示栏目的解决方法
    • 4帝国CMS无限级栏目导航实用教程-帝国三级导航使用方法
    • 5帝国cms栏目更改后刷新没反应
    • 6织梦生成栏目、频道、文章拼音伪静态的方法及规则
    • 7他们说的多终端登录/共享/同步/运行是什么意思?
    • 8帝国cms单页栏目模板制作(关于我们、公司简介、联系我们)
    • 9帝国CMS如何自动生成sitemap.xml网站地图文件
    • 10Linux强制删除文件夹和文件的命令

    热门标签

      关关采集规则书写时   打印机显示正在删除   静默复制JS   php代码记录UA   php代码   记录访客访问时间   记录访客IP   帝国CMS的灵动标签   无缩略图   隐藏的DIV通过点击显示出来   jquery.min.js   两套数据库小说站   无法用正则匹配做301永久重定向   PHP正则替换变量   PHP替换变量   str_replace   preg_replace   静默复制   网址输入跳转   html跳转网址加载
    返回
    顶部

    备案号:冀ICP备17005505号-1

    Copyright © 2018-2019 电脑屋 版权所有

    ×