当前位置: 萬仟网 > IT编程>网页制作>CSS > css 中多种边框的实现小窍门

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

2021年04月07日  | 萬仟网IT编程  | 我要评论
一、多重边框[1]背景知识:box-shadow,outline鉴于使用场景的多元化,多重边框的设计越来越多,以往可以借助 border-image 属性应付一下,但是这个在css 代码层面并不是很灵

一、多重边框[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;}

在这里插入图片描述

信封边框效果图

到此这篇关于css 中多种边框的实现小窍门的文章就介绍到这了,更多相关css 边框内容请搜索萬仟网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持萬仟网!

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

  • HTML+Css让网页自动适应电脑手机屏幕

    在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度 其中: width=device-width :表示宽度是... [阅读全文]
  • 利用CSS3的特性改变文本选中时的颜色

    选中文字时选区颜色变成了绿色,跟网站整体的绿色风格非常协调,其实实现很简单利用CSS3的特性,同样也可以指定部分元素设置选区颜色,详细如下,喜欢的朋友可以参考下... [阅读全文]
  • CSS定位中Positoin、absolute、Relative的一些研究

    positoin属性有四个值: static、fixed、absolute和relative,后面两个在布局中的定位里是经常用到的,... [阅读全文]
  • 9个设计师常用的高清图库 不敢配图? 这9个免版权图库牢记心中!

    9个设计师常用的高清图库 不敢配图? 这9个免版权图库牢记心中!

    一.pexels 提供大量高清尺寸,品质优良的摄影图片,所有图片都可以免费商用。网址:www.pexels.com 最好的免费图片在一个叫pexel... [阅读全文]
  • CSS(下)

    CSS(下)

    一、浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文... [阅读全文]
  • Vue之路由解析

    Vue之路由解析

    vue之路由 今天来看看vue怎么实现路由功能。 我们在vue-cil脚手架搭建好的基础上来实现路由功能。如果搭建完初始化项目时没有路由功能则需在npm安装路... [阅读全文]
  • css3.0 图形构成实例练习二

    css3.0 的出现给我们带来了很大的影响,本文主要知识点 transform属性/animate的应用,感兴趣的朋友可以参考并学习下实例,希望对你学习图形构成... [阅读全文]
  • 移动端布局的心得

    1.字体大小 font-sizepx/em/rem px像素 em:根据父级的字体大小有关,1em表示是父级字体大小一致 rem:根据html标签的... [阅读全文]
  • 高性能网站建设指南

    高性能网站建设指南 之前一个机械化工类企业网站项目:发现项目原网站确实卡的不行。 项目结束之后,与之前原网站对比了一下,性能优化的大有可... [阅读全文]
  • 关于css3 媒体查询@media

    关于css3 媒体查询@media

    做完页面后,用手机打开看后发现首页背景图变小了,留有空白,就是试着使用了媒体查询@media 宽度小于768px的使用手机版背景图,宽度大于768px的... [阅读全文]
验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com