广告位联系
返回顶部
分享到

css中多种边框的实现小窍门

css 来源:转载 作者:秩名 发布时间:2021-04-08 15:07:45 人浏览
摘要

一、多重边框[1] 背景知识:box-shadow,outline 鉴于使用场景的多元化,多重边框的设计越来越多,以往可以借助 border-image 属性应付一下,但是这个在css 代码层面并不是很灵活。现在我们借助 box-shadow 和 outline 两个属性来分别实现多重边框。 1、box-

一、多重边框[1]

背景知识:box-shadow,outline
鉴于使用场景的多元化,多重边框的设计越来越多,以往可以借助 border-image 属性应付一下,但是这个在css 代码层面并不是很灵活。现在我们借助 box-shadow 和 outline 两个属性来分别实现多重边框。


1、box-shadow 方案

思路:利用 box-shadow 的第四个参数(扩张半径)的大小,多重投影
代码示例:

<div class="border-multiple">
      多重边框实现方案一:box-shadow
  </div>

  .border-multiple {
      margin: 50px auto;
      padding: 20px;
      width: 600px;
      background-color: #fff;
      box-shadow: 0 0 0 10px #f0f,
                  0 0 0 15px #00f,
                  0 2px 15px 15px rgba( 0, 0, 0, .8);
  }
 

在这里插入图片描述

多重边框--box-shadow

小结:

1、阴影并不影响布局,也不会受到box-sizing的影响
2、支持逗号分隔语法,可以创建任意数量的投影
3、缺点:只能实现实线的边框,不能实现其他样式的边框


2、outline 方案

代码示例:

<div class="border-outline">
      多重边框实现方案二:outline
  </div>
  .border-outline {
      margin: 200px auto;
      padding: 20px;
      width: 600px;
      background-color: #ff0;
      outline: 3px dashed #0f0;
      outline-offset: -10px;
  }
 

在这里插入图片描述

多重边框–outline

小结:

1、前提是实现两层边框
2、可能需要 outline-offset 的属性值
3、outline 的描边默认是矩形,当有圆角时会认为是 bug , 不能贴合圆角
4、不支持逗号语法


二、边框内圆角[2]

背景知识:box-shadow,outline
为了解决上面例子小结3中的bug,可以用box-shadow 扩张半径来填补掉 圆角与outline 之间的空隙。
代码示例:

<div class="inner-rounding">
       需要借助 box-shadow、outline、“多重边框”来实现
       注意点 : box-shadow 的扩展半径应该是 圆角半径的 0.5倍
  </div>
  .inner-rounding {
      background-color: #ccc;
      margin: 50px auto;
      padding: 20px;
      width: 600px;
      padding: 20px;
      border-radius: 20px;
      box-shadow: 0 0 0 10px #f00;
      outline: 10px solid #f00;
  }
 

注意点 : box-shadow 的扩展半径应该是 圆角半径的 0.5倍;严格来说应该是(√2 - 1) 倍,这里取 0.5 倍是为了更好的计算

在这里插入图片描述

边框内圆角

三、半透明边框[3]

背景知识:rgba 或 hsla 颜色属性,background-clip
思路:让边框呈现在 被裁剪背景的 padding-box 里
代码示例:

<div class="border-opacity">
      半透明边框的实现
 </div>
 .border-opacity {
     margin: 50px auto;
     padding: 20px;
     width: 600px;
     border: 10px solid hsla(0, 0%, 100%, 0.5);
     background-color: #fff;
     background-clip: padding-box;
 }
 

小结:

半透明边框的实现需要借助css3的 background-clip 的属性
background-clip有三个属性:
1、border-box: 背景被裁剪到边框盒(看不到边框)
2、padding-box: 背景被裁剪到内边距框(可以看见边框)
3、content-box: 背景被裁剪到内容框(边框紧贴着内容)

在这里插入图片描述

半透明边框效果图

四、连续的图像边框[4]

背景知识:css 渐变,基本的border-iamge,background-clip
先来看看 border-image 是如何来实现 图像边框的:
border-image 的实现原理是九宫格伸缩法:把图片切割成九块,然后把它们应用到元素边框相应的边和角。
代码示例:

<p class="border-image">border-image 的实现原理是九宫格伸缩法:把图片切割成九块,然后把它们应用到元素边框相应的边和角。</p>
     <p class="border-image">我们并不想让图片的某个特定部分固定在拐角处;而是希望出现在拐角处的图片区域是随着元素宽高金额边框厚度的变化而变化的。</p>
     .border-image {
         border: 40px solid transparent;
         border-image: 33.334% url("http://csssecrets.io/images/stone-art.jpg");
         padding: 1em;
         max-width: 20em;
         font: 130%/1.6 Baskerville, Palatino, serif;
     }
     .border-image:nth-child(2) {
         margin-top: 1em;
         border-image-repeat: round;
     }
 

在这里插入图片描述

border-image 效果图

缺点:我们并不想让图片的某个特定部分固定在拐角处;而是希望出现在拐角处的图片区域是随着元素宽高金额边框厚度的变化而变化的。
如何解决呢?
实现思路:
1、利用 css 渐变和背景的扩展
2、在背景图片上,在叠加一层纯白的实色背景
3、为了让下层的背景透过边框区域显示出来,需要给两层背景指定不同的 background-clip 值
4、在多重背景的最底层设置背景色,需要用一道从白色过渡到白色的 css 渐变来模拟出纯白色实色背景的效果

代码示例:

<p class="contituous-images">实现思路:
           1、利用 css 渐变和背景的扩展
           2、在背景图片上,在叠加一层纯白的实色背景
           3、为了让下层的背景透过边框区域显示出来,需要给两层背景指定不同的 background-clip 值
           4、在多重背景的最底层设置背景色,需要用一道从白色过渡到白色的 css 渐变来模拟出纯白色实色背景的效果
       </p>
       .contituous-images {
           padding: 1em;
           border: 1em solid transparent;
           /* background: linear-gradient(white, white),
                           url(http://csssecrets.io/images/stone-art.jpg);
           background-size: cover;
           background-clip: padding-box, border-box;
           background-origin: border-box; */

           /* background 还可简写如下 */
           background: linear-gradient(white, white) padding-box,
           url(http://csssecrets.io/images/stone-art.jpg) border-box  0 / cover;

           width: 21em;
           padding: 1em;
           overflow: hidden;
           /* 边框可拖拽 */
           resize: both;
           font: 100%/1.6 Baskerville, Palatino, serif;
       }
 

在这里插入图片描述
连续的图像边框

还可以通过渐变图案实现信封样式的边框
代码示例

还可以通过 渐变图案实现 信封样式的 边框

<p class="envelope-border">还可以通过 渐变图案实现 信封样式的 边框</p>
.envelope-border {
    padding: 1em;
    border: 0.5em solid transparent;
    background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 3em 3em;
    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;}
 

在这里插入图片描述

信封边框效果图


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.jb51.net/css/770596.html
相关文章
  • CSS3浏览器兼容的介绍

    CSS3浏览器兼容的介绍
    一、浏览器兼容 1.1、概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核
  • CSS元素定位之通过元素的标签或者元素的id、cl

    CSS元素定位之通过元素的标签或者元素的id、cl
    大部分人在使用selenium定位元素时,用的是xpath元素定位方式,因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观,更好
  • 微信小程序纯CSS实现无限弹幕滚动效果

    微信小程序纯CSS实现无限弹幕滚动效果
    啥也不说,先上效果图 实现背景 产品:我们需要一个弹幕滚动效果,类似于微博热搜那种实时评论,但是我们的数据是固定的20条,你让他
  • 使用CSS构建强大且酷炫的粒子动画效果

    使用CSS构建强大且酷炫的粒子动画效果
    粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。 当然,不使用 HTML + CSS 的主要
  • flex:1的详细介绍

    flex:1的详细介绍
    简单的来说一下在别人问你这个问题的时候怎么来回答它 前端新人,如有错误求大佬指出~求教???? 情景复现 大佬提问:你知道flex: 1;的更深
  • 新的CSS伪类函数 :is 和 :where()示例介绍

    新的CSS伪类函数 :is 和 :where()示例介绍
    在编写 CSS 时,有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如,如果您想对标题中的 b 标签进行颜色调整,我
  • 纯CSS打字动画的实现方法

    纯CSS打字动画的实现方法
    在一些技术网站中,经常会看到这样一种展示效果:逐个显示一段文本中的字符,模拟出一种打字的效果。通过这种方式可以显著地提升网
  • 实现el-form每行显示两列底部按钮居中效果的教程

    实现el-form每行显示两列底部按钮居中效果的教程
    el-form 每行显示两列,底部按钮居中 问题: 以前的解决办法是:el-col,el-row。但是这里只有一个el-form-item的label数据是已知的,其余项都是循
  • CSS实现六边形的图片效果的代码

    CSS实现六边形的图片效果的代码
    前言 在CodePen上看到一个有意思的效果: 这个效果的难点在于六边形的绘制, 那么接下来我们就一起来看下作者是怎么实现他的吧 实现思路
  • CSS浮动引起的高度塌陷问题的详细介绍

    CSS浮动引起的高度塌陷问题的详细介绍
    正常页面布局 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 style *{ margin:0; padding: 0; } .content{ width:400px; border:1px solid #000; } .box{ width:200px;
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计