CSS3实现多样的边框效果

SolomonXie 发布于2019-04-23 13:45 / 2802人阅读

摘要：而借助支持逗号分割语法，可创建任意数量的投影，因此我们就可实现多重边框效果。实现方案是使用设置一层边框，再使用设置一层边框。

半透明边框

实现效果：

实现代码：


你能看到半透明的边框吗？

div {

    /* 关键代码 */
    border: 10px solid rgba(255,255,255,.5);
    background: white;
    background-clip: padding-box;
    
    /* 其它样式 */
    max-width: 20em;
    padding: 2em;
    margin: 2em auto 0;
    font: 100%/1.5 sans-serif;
}

实现要点：

设置边框为半透明，这是还看不到半透明边框，因为默认情况下，背景会延伸到边框所在的区域下层，也就是背景是被边框的外沿框裁切掉。
通过设置 background-clip: padding-box （初始值是 border-box）让背景不要延伸到边框所在的区域下层，也就是让内边距的外沿来裁切背景。

多重边框

实现效果：

实现代码：

/* box-shadow 实现方案 */
div {

    /* 关键代码 */
    box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
    
    /* 其它样式 */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}

/* border/outline 实现方案 */
div {

    /* 关键代码 */
    border: 10px solid #655;
    outline: 5px solid deeppink;
    
    /* 其它样式 */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}

实现要点：

box-shadow 实现方案使用的是 box-shadow 的第四个参数（扩张半径）。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框。而借助 box-shadow 支持逗号分割语法，可创建任意数量的投影，因此我们就可实现多重边框效果。
border/outline 实现方案是使用 border 设置一层边框，再使用 outline 设置一层边框。这个方案可实现虚线边框，但它只能实现两层边框。

边框内圆角

实现效果：

实现代码：

我有一个漂亮的内圆角

div {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655; /* 关键代码 */
    
    max-width: 10em;
    border-radius: .8em;
    padding: 1em;
    margin: 1em;
    background: tan;
    font: 100%/1.5 sans-serif;
}

实现要点：

outline 不会跟着元素的圆角走（因而显示出直角），但 box-shadow 确实会的，因此，将两者叠加到一起，box-shadow（其扩张值大概等于 border-radius 值的一半）会刚好填补 outline 和容器圆角之间的空隙，因此可达到我们想要的效果。

云服务器 GPU云服务器点击边框效果js js实现f11的效果这种效果怎么实现实现放大镜效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2296.html

CSS3 巧妙实现聊天气泡

摘要：想必大家都知道，这里不赘述，聊一聊其他实现方法。这里的三角形部分可以使用正方形代替，实现同样效果，方法就是旋转小正方形使其一部分露在外面。 showImg(https://segmentfault.com/img/bVEcKn?w=4136&h=1956); 前一阵子敢玩的 Mobile 页改版完成了，就之前的页面风格更加扁平化，从暗色系为主背景转到亮色背景，去掉更多的阴影，给用户简约...

bang590 2019-08-29 11:26 评论0 收藏0
[实践总结]纯css实现动态边框

摘要：另外一种实现思路是添加四个来分别实现上下左右的边框效果，虽然可行，但是要添加四个额外元素，有点儿得不偿失的感觉。背景这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图： showImg(https://user-gold-cdn.xitu.io/2019/5/15/16aba8a2ccb58e4e);动态边框思路看到这个效果，我首先想...

BlackHole1 2019-05-23 16:28 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

Jingbin_ 2019-08-29 16:15 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

mayaohua 2019-08-02 11:08 评论0 收藏0
CSS3实现多种背景效果

摘要：灵活的背景定位灵活的背景定位实现效果将背景图定位到距离容器底边且距离右边的位置。棋盘实现效果实现代码关键样式其它样式伪随机背景伪随机背景实现效果重复平铺的几何图案很美观，但看起来可能有一些呆板。灵活的背景定位实现效果：将背景图定位到距离容器底边 10px 且距离右边 20px 的位置。 background-position 方案实现代码：海盗密码 div { /* 关键样...

Scliang 2019-04-23 13:44 评论0 收藏0