资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端每日实战：3# 视频演示如何用纯 CSS 创作一个容器厚条纹边框特效

前端每日实战：3# 视频演示如何用纯 CSS 创作一个容器厚条纹边框特效

iliyaku / 1556人阅读

摘要：代码解读定义一个名为的容器内容居中显示画条纹背景在容器内定义一个名为的容器容器留出厚边框，容器嵌在其中设置厚边框的立体效果容器中增加内容内容布局定义动画效果最后，把动画效果应用到容器上大功告成知识点

效果预览

按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。

https://codepen.io/zhang-ou/pen/YLqbXy

可交互视频教程

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/c/cPvn6tE

源代码下载

请从 github 下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/003-diagonal-stripe-border-effects

代码解读

定义一个名为 box 的容器：

内容居中显示：

html,
body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

画条纹背景：

.box {
    width: 300px;
    height: 300px;
    background: linear-gradient(
        -45deg,
        white 0%,
        white 25%,
        hotpink 25%,
        hotpink 50%,
        white 50%,
        white 75%,
        hotpink 75%,
        hotpink 100%);
    background-size: 10%;
}

在 box 容器内定义一个名为 content 的容器：

box 容器留出厚边框，content 容器嵌在其中：

.box .content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    box-sizing: border-box;
    padding: 15px;
}

.box .content {
    background-color: white;
}

设置厚边框的立体效果：

.box,
.box .content {
    box-shadow: 0 0 2px deeppink,
                0 0 5px rgba(0, 0, 0, 1),
                inset 0 0 5px rgba(0, 0, 0, 1);
    border-radius: 10px;
}

content 容器中增加内容：


    

        
What is Lorem Ipsum?

        
Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risus sed, congue congue quam. Morbi sit amet suscipit ex. Vivamus vel nulla ac libero volutpat ultrices.

内容布局：

.box .content {
    flex-direction: column;
    box-sizing: border-box;
    padding: 30px;
    text-align: center;
    font-family: sans-serif;
}

.box .content h2 {
    color: deeppink;
}

.box .content p {
    color: dimgray;
}

定义动画效果：

@keyframes animate {
    from {
        background-position: 0;
    }

    to {
        background-position: 10%;
    }
}

最后，把动画效果应用到 box 容器上：

.box {
    animation: animate 2s linear infinite;
}

大功告成！

知识点

linear-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

@keyframes https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

background-position https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

lorem ipsum https://lipsum.com/

GPU云服务器 云服务器 如何用css 如何用云服务器做一个个人网站 如何用vue开发实时音视频 纯CSS

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

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

相关文章

  • 前端每日实战：3# 视频演示如何用纯 CSS 创作一个容器厚条纹边框特效

    摘要：代码解读定义一个名为的容器内容居中显示画条纹背景在容器内定义一个名为的容器容器留出厚边框，容器嵌在其中设置厚边框的立体效果容器中增加内容内容布局定义动画效果最后，把动画效果应用到容器上大功告成知识点 showImg(https://segmentfault.com/img/bVbcWRf?w=500&h=500); 效果预览 按下右侧的点击预览按钮在当前页面预览，点击链接全屏预览。 h...

    dockerclub 评论0 收藏0

  • 前端每日实战专栏 2018 年 4 月份项目汇总（共 8 个项目）

    摘要：前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书以下是年月份发布的项目视频演示如何用纯创作一个按钮文字滑动特效视频演示如何用纯创作一个矩形旋转特效视频演示如何用纯创作一个容器厚条纹边 《前端每日实战》专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书！ 以下是 2018 年 4 月份发...

    draveness 评论0 收藏0

  • 前端每日实战专栏 2018 年 4 月份项目汇总（共 8 个项目）

    摘要：前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书以下是年月份发布的项目视频演示如何用纯创作一个按钮文字滑动特效视频演示如何用纯创作一个矩形旋转特效视频演示如何用纯创作一个容器厚条纹边 《前端每日实战》专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书！ 以下是 2018 年 4 月份发...

    legendmohe 评论0 收藏0

发表评论

登陆后可评论

0条评论

iliyaku

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<